I've made a mobile version of a webpage and it works on Android and small browser windows without problems.
On iOS however, when a user pinches the screen, it zooms out to fit the entire page on the screen. It's a long page, so this is not ideal.
I have the following in my head:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
I'm aware that iOS 10 has a known issue with overriding user-scalable=no, but this is happening also on iOS 9 and 8.
Does anyone have any ideas how I might be able to solve this?
Many thanks
The correct format of that meta tag is as follows:
<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">
Related
I just uploaded a site that I've been working on locally and got some unexpected glitches that I'm not too sure how to fix, nor do I know why they happened.
The reponsiveness of the blog page here,works fine when you shrink the browser on our desktop, but if you look at it on a phone, it is not responsive at all. Anyone have any ideas?
Your phone has something what is called a Viewport. This is probably what makes it look bad.
Try adding this meta-tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Check this link to get more info about those viewports: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.
I have put this tag in the head of a webpage:
<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">
For some reason, it simply seems to be ignored on my iPhone, even adding user-scalable=no has no effect. I have tried many values of width, initial-scale etc... nothing seems to have any effect.
Does anyone know what might be causing this? I can see clearly in the source that it is there in the header.
My iPhone is on iOS7.
Edit: The problem is still happening on iOS6 with the xcode ios simulator, so I don't think it is due to iOS7.
It is working! On your page you are using:
<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">
When I open the page on my phone (ios7 iphone5) I see exactly the right result.
Are you 100% sure you really tried putting the following in your code?
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
It doesn't get ignored.
UPDATE1
I just saw that in your code it seems you are using my second viewport but i gets changed probably by javascript to the 640px viewport. Thats maybe the reason why for you it feels like it gets ignored. Because during runtime the viewport gets changed...
UPDATE2
Ok found the problem.
function updateWidth(){
viewport = document.querySelector("meta[name=viewport]");
if (window.orientation == 90 || window.orientation == -90) {
viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
}
else {
viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
}
}
Your page is calling this function which overrides your viewport. Did you know about that function?
I know this is a hella old question now but it was the first result in Google when I had this issue so thought I'd update in regards to iOS 10.
It seems Apple now completely overrides the user-scalable=no in iOS 10 in order to improve accessibility
See: Thomas Fuchs' Twitter Post
You should try, as a workaround, the following code:
html {
zoom: .8;
}
Viewport width is different in many devices. iOS has 320, android has 360 in portrait mode. Landscape mode - it depends on which device you have, you will get a different pixel value.
The best way to make website optimized for mobile device is to set width=device-width. If you don't set initial-scale=1.0 - iOs will zoom in (enlarge) screen when changing device rotation.
This is the meta tag you need.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And if you wanted to disable the zoom feature, set user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Do not hard code width property as it will set same width for portrait and landscape modes - which is very unpleasing user experience.
Best documented: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
About iOs 7
Moreover I would say - dont worry about iOS7 as of now. It has so many bugs. Read here: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
It seems that ios7 is not recognising the meta tag properly.
Here are the links which may help you.
webapp not scaling properly in iOS 7
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Use below code.
<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">
It works well in many of mine project.
I am trying to enable pinch zoom on my website. I've tried to enable zooming by setting meta viewport like this but without any success.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0, minimum-scale=1, user-scalable=yes"/>
Any ideas why my site is still not zoomable on ipads and iphones?
This may be a bit late seeing that it has been answered almost a year ago... Although I tried your meta tags on my HTML page of my IOS app.
The tags didnt really let me zoom out, and barely let me zoom in, and when I would zoom, it would revert back to its original size.
Now I was able to zoom out all the way, and zoom in a "a lot" and it would hold the zooms with these meta tags:
<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
i am having an issue with most of my new sites which use H5BP when viewed from Windows Phone 7 (or 7.5). The problem is that this HTML tag in the site's source
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
which should actually support different mobile devices, prevents the user of a mobile device (in our case Windows Phone 7 or greater user) to zoom in on the text (and the site itself).
Using this tag the mobile browser will adjust the size of the site according to the mobile viewport (i.e. mobile screen width and height). However, the problem is, when the user tries to zoom in on the text using the zoom-in gesture, the zooming doesn't work. It tries to zoom in but quickly returns to the initial width.
Has anyone else noticed this problem and if so, what is the solution?
You may want to test adding user-scalable=yes to see how Windows Phone handles the tag.
Although the tag is supported by almost all mobile browsers it isn't a standard tag (originated on the iPhone) so the implementation may differ. I find that Safari has the best documentation on the tag and as such I sourced it below.
This tag should be worth testing:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Source: Safari Documentation.
Additional resource: IE Mobile Viewport via Windows Phone Team.
I don't have a windows phone to test but perhaps adding the user-scalable=yes may help on windows mobile.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">