On my webpage I have:
<meta content="width=device-width, initial-scale=0.80, maximum-scale=0.80, user-scalable=no" name="viewport">
This works fine for everything I've tested including safari on a iPhone but it refuses to scale to anything less then 1.0 inside of a webview in a iOS app.
Ideas?
I found a solution:
[_mywebview setScalesPageToFit:true];
fixes it for some reason.
Related
The front end and responsive design of following page is working properly in all mobile browsers except iPhone 7 and iPad 7.
http://tinglabs.in/chennai/tingau/index-ios-resp.html
I have tried scaling it properly through the following meta tags but it still doesn't work
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
Am I overlooking something?
you can try to use this
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
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 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.