In iOS 9.2, a WKWebView rendering HTML with fixed-width tables bigger than the device width could be told to shrink the content to fit by adding a viewport tag like this:
<meta name="viewport" content="width=device-width, shrink-to-fit=YES">
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:
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
WKWebView *newWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0,40,self.view.frame.size.width, self.view.frame.size.height - 40) configuration:wkWebConfig];
NSString *toRender = #"<head><meta name=\"viewport\" content=\"width=device-width, shrink-to-fit=YES\"></head><body><table width=700 style='background-color: blue; color:white; font-size=20px'><tr><td>this is some text that is long enough to exceed the width of the iphone 6 unless shrink-to-fit is applied</td></tr></table></body>";
[newWebView loadHTMLString:toRender baseURL:nil];
[self.view addSubview:newWebView];
The content renders like this:
However, this behavior has changed in 9.3. The identical code running in 9.3 renders like this:
(Although you can't see it in the screenshot, there is a horizontal scrollbar)
Searching other questions on stackoverflow and elsewhere, it seems like most other people prefer the 9.3 behavior. However, I need the 9.2 behavior, of shrink-to-fit. So, my question is: does anyone know how to get the same shrink-to-fit behavior in 9.3? And does anyone know if this change is intentional, or a bug that's going to be fixed in subsequent releases?
My test code can be found at https://github.com/nsolter/NSWebViewShrinkTest, specifically https://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m
I filed a bug report with Apple, and this is the response:
"No, we don’t want to maintain shrink-to-fit behavior. The workaround is to use a viewport meta tag that correctly describes the width of the content."
I tried this out. 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 of 700, if you specify: <meta name=\"viewport\" content=\"width=700, shrink-to-fit=YES\">
Then the page will display without horizontal scrollbars.
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. My current solution is to render it once with width=device-width, then render it again with width=X, where X is the actual width of the rendered page the first time.
Related
I've come across an issue present on IPad and IPhone 6. When the user is at the middle of the page and rotates from landscape to portrait they are taken to the bottom of the page. After a lot of looking around into the issue I found that I could fix the issue using the viewport meta tags. I am currently using:
`<meta name="description" content="width=device-width", initial-scale=1/>`
When I remove the initial scale the issue is fixed but then the ipad scaling issue occurs where landscape is zoomed in and portrait is not.
Does anyone have a solution?
Use autoLayout and size classes to set your View according to orientation you will not need to look for metadata detail.
ive put the viewport meta tag into a a tumblr blog and it works fine but there seems to be a large area that scrolls to the right of the body that has nothing in it.
This does not show up on the desktop version so i cant use firebug to see why and im kinda at a loss of how to identify the problem.
I was thinking of setting overflow:hidden; but i didnt think you can do this for only horizontal plus it does not actually address the problem just covers it up.
the blog in question is www.blog.lightandspace.co.uk
please see the THIS SCREEN SHOT for example, its from ios sim but its exactly the same on the device (please not the scroll bar at the bottom) ... sorry i can embed it but im a new user and it wont allow me to
any helps much appreciated
cheers
It could be because your viewport width is set to 1224px, which is much wider than the iPhone viewport. Try this instead:
<meta name="viewport" content="width=device-width maximum-scale=1.4" />
This should set the viewport to the width of the device, so it should render nicely on any mobile device.
When a users views my site on a Blackberry they are unable to scroll horizontally. This is important because the view port on the Blackberry is smaller than that of the width of the site. They can still scroll up and down just not side to side. The other thing is they cannot zoom out for the site either. Finally the site will not change orientation either. When testing on iPhone and iPad zooming and scrolling work fine.
Could it this be caused by a meta tag or view port setting? What are some of the things that could be causing this issue?
The issue appears to be that in absence of a meta tag the Balckberry Browser will set its own viewport to the screen width of the device. This made it so that the rest of the page to the right of the device viewport was cut off and although users could scroll up and down they could not scroll side to side.
The issue was solved by adding a meta tag defining the viewport, its width, and a zoom level with scalability explicitly defined.
<meta name="viewport" content="width = 1000, initial-scale = 1.0, user-scalable = yes">
I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.
So I want a page that's nothing but a square image which scales up to the height of the window. Fine, great, I do:
img
{
max-height:100%;
height:100%;
width:auto;
}
and stick an in a center-aligned div. Firefox loves it, but insists on the height:100%. Chrome doesn't need that, but adds a little bit of height to the page and so a scrollbar pops up. The whole page itself is still rendering identically down to the last pixel, but Chrome seems to think its window is a little heightier than it actually is. What's going on?
Check the margin and padding on the html and body elements -- often a hidden source of pain!
Yes, I know this was in my comment, but this way the question looks answered :-)