I cannot seem to find the workaround for this.
On ios9 in mobile safari, if a webapp uses position:absolute and bottom:0 for the content area to cover the whole screen, when in landscape mode the safari navigation bar will cover the bottom of the content and you cannot scroll past it - it does NOT block in portrait.
portrait mode is fine, even when navigation bar is there
it's not an orientation change bug, happens if page is started in landscape
bug does NOT happen if the webpage is added to the homescreen, works perfect in landscape and content is visible (because navigation is not there)
So why does safari get bottom:0 correct in portrait but not landscape?
setting position:fixed on the html element magically fixed this
html { position:fixed; width:100%; height:100%; overflow:hidden; }
not sure why but must be a rendering bug that fixed works around
for some reason fixed also change the font size in landscape but I can work around that too
I had same problem, on orientation change if its in landscape mode, change your viewport meta to:
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
I'm doing this by simply finding $('meta[name="viewport"]') and replacing its content.
Related
I'm having a special problem using Chrome on relatively newer iPhone models. (iPhone 11 or higher)
With the viewport set, there is no problem on portrait screen, but on landscape screen It doesn't seem to be calculating the width of the screen correctly.
current viewport settings :
<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=yes, width=1200, minimal-ui, minimum-scale=0.25, viewport-fit=cover">
In other words, the problem is that the content does not fit into the screen width properly and scrolling occurs.
!! It should be properly fitted as below !!
bug
normal
For reference, there is no problem at all in other device brand and browsers such as Safari and Firefox.
Is it possible to solve it by setting the viewport? Or should I write a separate script?
How can i solve it? I need your help.
Tried everything related to the viewport but failed..
I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag.
When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2:
The Problem:
When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image.
Landscape is fine and all other devices / OS' are working as expected.
The website is Utilidata.com. Has anyone seen this behavior or know of a fix?
<meta name="viewport" content="width=device-height, initial-scale=1, user-scalable=no"/>
UPDATE: I'm seeing reddit people freaking out about iOS 9's viewport issues. However their shrink-to-fit=no solution doesn't fix.
Make sure to incorporate below changes to meta > viewport:
Remove width=device-width and height=device-height
Also set
*-scale to 1.0001 from 1.0.
-
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
Worked well for me! Good Luck!!!
i have made an website with fullscreen background slider/image. I have used "backstretch", see here: http://srobbin.com/jquery-plugins/backstretch/
It works nearly everywhere. On the current Opera, Chrome, Safari, Firefox on Mac and Windows and even on IE10, IE9 and IE8 on Windows. Mobile, too - works on the old Android Browser, Android Chrome, iOS (all Versions) Chrome and on iOS 4, 5, 6.x Safari.
But not on Safari on iOS 7.
The problem: If you scroll down the url bar and the bar on the bottom hide. But the image does not scale up to be as big as the screen. A white bar at the bottom appears, as high as the hidden toolbars are.
Im sure that this is not a problem with my code. Google Crome for example works the same way - the bars hide when scrolling - but the image scales up to fit the "new bigger screen".
Other fullscreen background image website make the same problem on iOS 7 Safari.
Have anyone a solution for this problem?
And: Is this just "different" made and i have to code different or is this a bug, which is not wanted by Apple?
Sorry for this buggy English!! :D
Thank you for you help. :)
Just add this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
before tag
I have a UIWebView containing some HTML where the containing div's width and height are set to 100%. This works great on iOS 6, where the div fills the UIWebView in both portrait and horizontal orientation. When I run it on iOS 5.1 it doesn't work. The div's width seems to be 100% of the iPad's screen instead of the UIWebView. The UIWebView enables the horizontal scrollbar and the content gets too wide.
What should I do to handle the needs of iOS 5 in this situation?
I have tried to insert some viewport options as mentioned in the comments of iOS 5 and iOS 6 - UIWebView difference in behaviour, but it does not seem to make any difference.
I was always bothered by this pre-iOS-6 behavior, because as you say by default UIWebView uses the device's screen size, not the view view's frame. However adding the following viewport meta fixes the issue for me also on iOS 5. Try making sure to only load the content once the web view has its final frame.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Everywhere I read, the width of the screen on the Ipad 1 is 1024 x 768.
I have built a site using bootstrap and the collapsable nav button appears when viewing the site in landscape mode on my iPad. It should not. It should only appear for viewports that are less than 1024px in width.
I then sniffed out the width as jQuery sees it using $(window).width(); and it is reporting only 768px x 467px;
I have the following metatag:
meta name="viewport" content="width=device-width"
In landscape mode the iPad zooms content in so that the effective viewport with is the same as in portrait mode.
Try this - ISTR it's supposed to force all windows to 1:1 zoom, and prevents user zooming.
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">