Wkwebview fit content to screen

In iOS 9. This line caused the WKWebView to effectively zoom out the viewport so that the entire rendered page fit in the view frame without the need for scrollbars. For example, consider the following code, when run in viewDidLoad in a vanilla single view app:.

wkwebview fit content to screen

The content renders as I expect on ios 9. However, this behavior has changed in 9. The identical code running in 9. Basically, on 9. It seems like most other people prefer the 9. However, I need the 9. So, my question is: does anyone know how to get the same shrink-to-fit behavior in 9.

And does anyone know if this change is intentional, or a bug that's going to be fixed in subsequent releases? The workaround is to use a viewport meta tag that correctly describes the width of the content. I tried this out.

wkwebview fit content to screen

If, in the viewport tag, you specify a width of the actual width of the html after it's rendered, it will display properly on your device width. In my example above, with a table width ofif you specify:.

Note that you can't specify an initial-scale viewport property, though. Then it doesn't display with the proper width. This is obviously less than ideal, because you generally don't know what the width of your rendered html will be until you render it.

Error: You don't have JavaScript enabled. This tool uses JavaScript and much of it will not work correctly without it enabled. Please turn JavaScript back on and reload this page. Please enter a title. You can not post a blank message. Please type your message and try again. This content has been marked as final.Keep in touch and stay productive with Teams and Officeeven when you're working remotely.

wkwebview fit content to screen

Learn More. Learn how to collaborate with Office Tech support scams are an industry-wide issue where scammers trick you into paying for unnecessary technical support services. You can help protect yourself from scammers by verifying that the contact is a Microsoft Agent or Microsoft Employee and that the phone number is an official Microsoft global customer service number.

Did this solve your problem? Yes No. Sorry this didn't help. April 7, Keep in touch and stay productive with Teams and Officeeven when you're working remotely. Site Feedback. Tell us about your experience with our site. IokepaPumphrey Created on March 14, This thread is locked.

You can follow the question or vote as helpful, but you cannot reply to this thread. I have the same question User Replied on March 14, Check your user manual, see if it tells you which resolution is for your computer.

Here is a table of guide line: 3. Do a system restore. Pick the date when your screen was in proper size as your restore point. The machine will re-start when it is done. Note : In case the images that appear in your screen are too large for you to implement the above methods, go to Safe Mode and run those suggestions. Here is how to get to Safe Mode:. Thanks for marking this as the answer. How satisfied are you with this reply? Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response? This site in other languages x.First, you know the Safari on iPhone X automatically applies paddings. The contents will be restricted inside the safe area by default. However, this behavior is different from Safari, as Fig. So why Safari looks different? No, you can tell it is placed filling the whole screen because when you scroll a page, the content goes up underneath the navigation bar, and you can see it through the translucent navigation bar in portrait.

For example, apple. Safari displays it appropriately. However, on my custom web browser made with WKWebView, the header bar goes under the navigation bar inappropriately and is snapped onto the top edge of the screen WKWebView.

On Safari, the top padding contentInset. Therefore, if you implement your custom web browser with WKWebViewyou should do the following things. This removes auto-applied paddings from all four edges. However, the top edge still needs its padding contentInset. So you need to care about it by yourself. Though, WKWebView has a bug on rotation. This is another story. Skip to content. Safari with default paddings — portrait. Safari with default paddings — landscape.

WKWebView with default paddings — portrait. WKWebView with default paddings — landscape. Fixed WKWebView — portrait. Fixed WKWebView — landscape.

Search for:. Proudly powered by WordPress.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service. The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

With UIWebView I used scalesPageToFit to ensure the web pag was displayed with the same size as the screen size so as to appear full screen without scrolling. Adding meta tags or changing java script code did not work for me. Then I changed the frame so it worked well, my web view was aligned and fit the screen after I wrote following code Swift :. Learn more. Asked 5 years, 6 months ago.

Active 10 days ago. Viewed 52k times. Nagarjun 5, 5 5 gold badges 27 27 silver badges 44 44 bronze badges. Active Oldest Votes. Works like a charm. It doesn't add this script. This worked out great. The height of the element from offsetHeight kept coming back too big until I added this script.

Subscribe to RSS

Thanks for the help. Echo of nferocious76's answer, in swift code: Swift2. Efe Ariaroo Efe Ariaroo 7 7 silver badges 10 10 bronze badges. I'm using this to "refresh" the content font size and inner layout. I figured out below soultion. For making the content to fit with the device size. Ankita Ankita 14 14 bronze badges.

Adding the below to my HTML script helped me. Hepsiba Hepsiba 21 1 1 bronze badge. Best answer. I spent a good 4 hours looking for this. Alexander Nikolenko Alexander Nikolenko 2 2 silver badges 8 8 bronze badges.

How to scale a view based on device size using Auto Layout in Interface Builder

Burcu K. Kutluay Burcu K. Kutluay 10 10 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.There has been lots of discussion around methods of resizing the webview to fit the size of its content.

The actual issue can be seen when we are using webview inside a scrollview. If at first we load huge data in webview, it expands itself to fit the whole content, but when we load a smaller data later, it still shows the same previous size, which is way more than size required to display smaller data.

Side effect of this is that user can keep scrolling beyond the html content. As you can see, most of the people suggest not to use webview inside scroll, and others suggest creation of new instances of webview every time we load a url into it.

But both of these are not real solution to the problem. Hi, that javascript have problem when a webpage have another part like showmore, or comment, can you help me?.

I guess you are right. Does this example counting on reloading webView with new content? What if I want my webView to resize only when orientation is changed, without changing html code? Could you please help me? Can you provide more information? If you are comfortable, can you provide the code you are trying? In this case it just shows the empty but scrollable space. Hi Sergii, this workaround was done to handle this specific scenario of webview inside scrollview.

But in case you are observing something different then kindly share more information. You are commenting using your WordPress. You are commenting using your Google account. You are commenting using your Twitter account. You are commenting using your Facebook account.

Notify me of new comments via email. Notify me of new posts via email.

Me & my code

Share this Tweet. Email Share on Tumblr. Leave a Reply Cancel reply Enter your comment here Fill in your details below or click an icon to log in:. Email required Address never made public.WKWebView is a powerhouse on iOS, providing high-performance web rendering wherever and whenever you need. So, if you want to solve a specific problem, or if you just want to see what WebKit is capable of, read on!

Sponsor Hacking with Swift and reach the world's largest Swift community!

viewport-fit=cover is confusing for app developers

This is inefficient, and also far harder than it needs to be. Having a dedicated webView property is helpful so that you can reference its properties and methods more easily later on. If you intend to load URLs frequently, you might find it easier to wrap that behavior inside an extension:. For example, if you wanted to load a file called "help. That url. For example, this displays a heading message:. If you are referencing assets in your bundle such as images or CSS, you should specify Bundle.

wkwebview fit content to screen

For example:. Second, make that object the navigation delegate of your web view. Finally, implement the decidePolicyFor method, adding any logic you want to decide whether the page should be loaded. As an example, this implementation allows the user to visit the Apple homepage and nothing else:. If you were using your view controller you would write this:. Finally, implement the decidePolicyFor method with whatever logic should decide whether the page is loaded internally or externally.

For internal loads make sure you call the decisionHandler closure with. This can be done by observing the estimatedProgress property, like this:.

You should now implement the observeValue forKeyPath: method, which will pass you a string saying what changed. You can use webView. Now implement the observeValue forKeyPath: method. This is all available inside the backForwardList property of web views, which itself contains the array backList and forwardList. Inside each of those arrays you can read the URL for each page that was visited, along with the title that was used.

For example, you can print out a list of all sites the user has already visited using this loop:. Once your web view has loaded some content, you can execute any JavaScript you like inside that rendered page by using the evaluateJavaScript method.

You can read through the complete list of cookies associated with a website by using the httpCookieStore property of your web view. This is buried under the configuration. User agents let your web servers identify the type of web browser that is accessing a page, and are commonly used to enable or limit which features are available. Note: There's nothing stopping you from changing the user agent when accessing other resources, but keep in mind that some sites might read the user agent string and get confused if it doesn't match what they expect.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. When this property is truethe WebView should attempt to size itself to the minimum size necessary to fit the web content being displayed.

Auto-sizing should take place only along unspecified dimensions; e. Fill are in play, the WebView should honor those specifications and only size itself vertically to fit the content.

This may require use of features in in order to query the document object for size information. Off the top of my head, js added a ms lag which caused an unsightly flash before resizing, DOM sizes were frequently a few px adrift of the rendered bitmap, and detecting changes after the initial load require polling or a ResizeObserver polyfill.

It turns out that observing size changes of the native webview is simple and resizing is immediate. On iOS we used KVO to watch for changes to the webview's underlying scrollview and post changes to the element:. On Android we created a subclass of Android. WebView that raises an event if the size changes after invalidation:.

I haven't used Xamarin. WebView or looked at the source in a long time, but I don't think this would be hard to backport. I might be able to take a stab in the next week or two. If there's a closer-to-native way to make it work, then that's what we'd like to use.

I don't want to depend on JS for anything unless we absolutely have to. Do we have a clue if this is possible in all platforms? I have code for Android, iOS, and Mac. I'll put a PR together for the platforms I know then investigate the others. If not we can add it back to the available pool. Bump michaeldwan.

thoughts on “Wkwebview fit content to screen”

Leave a Comment