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">
Related
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.
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.
I use the plugin fullpage.js for a new project.
Now there is a problem. The Scrolling animation doesn't work on mobile devices. Here is the URL: www.manu-oliver.de/web/test.html
I hope somebody can help me. :)
You are using responsive: 900, which means fullPage.js will stop auto scrolling in screens with less than 900 pixels width as pointed in the docs.
responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
There is a strange behaviour in one of my installations with ImpressPages: Not all pages have the same width.
I'm using the default theme "Air".
The installation is at
http://www.impresspages.ch
It is the page "Link" that has not the same width as the other pages.
Any idea what causes this?
Your website looks normal. Maybe you see that center content goes slightly to the left on that page? If that's the case, it means that on your screen that page gets a visible scrollbar. And the browser you use hides/shows the scrollbar only when it's needed. For that reason the area for the page shrinks and automated centering ends up on a different position.
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.