I'm using this viewport below.
<meta name="viewport" content="device-width, initial-scale=1, maximum-scale=1" />
As you see, I don't want to allow users to make zoom in their devices with maximum-scale="1".
I'm testing in my smartphone, and this viewport is working fine on google chrome browser, but when I test in firefox I'm able to make zoom.
Do you know why? And how I can fix this?
Under content add "..., user-scalable=no' />"
Straight from the horse's mouth: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
HTH
Related
Trying to find a way to prevent user to be able to zoom in a web page in latest ios and android.
I tried:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
...also:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
...and:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
But it is still zoomable
Any others solutions ?
Thanks
This actually depends on the version of the browser you are using ,with each browser version having its own html code for restricting zooming.
If you use android 2.2 or below It is not supported at all
Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.
Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.
iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug
Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.
Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:
<meta name="viewport" content="width=620, user-scalable=no" />
iOS/Safari 8 Beta 4: There was a meta tag minimal-ui which worked fine in ios 7 versions ,however it has now been removed by Apple in this release.
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
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 not able to zoom my responsive site in IPhone and IPAD.But at the same time I am not having any problem with Android mobiles. It is perfectly zooming in and zooming out.
I am having the meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
Pretty much says it all on its own:
user-scalable=0
The Safari Web Content Guide tells us to use this when we want "to set the initial scale and to turn off user scaling." This is what prevents you from zooming in and out.
I think you should remove the last 3 atrributes,
, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0
entirely.
That should allow Mobile Safari users to scale if they want to.
You need to also set "minimum-scale=1.0" to whatever you want your users to be able to zoom to (as well as setting the "user-scalable" to 1), for example: 2.0 would 100% zoom.