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!!!
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 am trying to create a small chart application for iOS using cordova. When I ran the application in browser the chart is scaled to the width of the my browser, though I have reduced the size of it and it looks perfect, but when I ran the same in iOS emulator, it doesn't scale and I had to scroll horizontally and vertically to view the entire chart. I am not sure where I am missing it. Below is the image, left side is the browser one and right is the emulator one, as you can see emulator one doesn't show up the entire chart. I tried both iPhone 6 and iPhone 4S emualtors and still faced the same issue.
Please change the viewport to:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi"/>
Problem Demo
The problem is visible on IOS device (tested on iPhone 5). When viewing the page in landscape mode and switching to portrait mode, white space on the right side of the page shows up.It should be connected with mobile browser that is supported by iOS devices (Safari).
I tested on Xperia V for example and this problem is not there. Do you have any suggestions on how could i fix this issue?
The template is build on bootstrap and uses owl carousel in the slider. Any help would be appreciated!
add this to your head section:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
i had a similar issue with a kindle and this helped me out... hope is works.
I am currently working on retrofitting a website from the ground up to be ipad friendly. I'm noticing that its size is slightly off compared to the desktop version of the site. I have included photos of the site for comparison.
I'm using <meta name="viewport" content="width=device-width, initial-scale=1"> and still nothing.
All sizes are set in pixel width or percentages. The blue sidebar is set in px, the content area to the right is just absolute positioned.
Desktop Screen Cap:
https://drive.google.com/file/d/0B0p4T6XDlqiyVmVnNmNFMDVBV00/edit?usp=sharing
iPad Screen Cap:
https://drive.google.com/file/d/0B0p4T6XDlqiyQmVma291dkctV0E/edit?usp=sharing
Thanks guys!
So I got to ask if a CSS Library is being used? Similar things have happened to me. The first issue was that my CSS Library (bootstrap 3) was automatically being responsive. The other reason this happened to me was because the iPad had retina display and my desktop did not, however it was not that different. Without knowing what tools you are using to help build the site that is my best guess.
So this is extremely embarrassing but for whatever reason my code wasn't getting passed into the site. After some fiddling with the server and making sure I was in the correct spot it looks like <meta name="viewport" content="width=device-width, initial-scale=1"> worked perfectly.
Strange that there was no issue on the android devices I tested, only on the iPad.
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