I'm working on a mobile site that needs to allow the user to pinch to zoom the page. When I add the meta viewport tag below, and many variations of it, the page does not allow zooming.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=1">
If I remove the tag all together I get the page to allow zooming, however it's initial zoom level is very small and almost unreadable. Yes I understand I am allowing the user to zoom, but the initial page should be readable to most humans, not something around 5px font-size as it is now. Any help on what the issue with the viewport settings need to be to work would be great.
I've never seen "user-scalable" have a value of "1". I believe the default is for it to be on, so try removing that portion all together.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
Related
I have setup my dev site for desktop looks beautiful! but then when i go to mobile it is aligned to left with an empty space in the right.
My first thought was because the logo at top is too big and that causes to have that empty space at the right so i reduce the width without solving my issue.
https://www.dropbox.com/s/lh3ldx455m7ohzc/error.jpg?dl=0
you can see my dev site here:
http://dev.pixlgraphx.com/dynmulti/
Thanks in advance
I think it is related to you specifying the viewport twice.
You have:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
.
.
<meta name="viewport" content="width=device-width" />
Try removing that second viewport line, leaving just the first. It seems to be upsetting the page scaling, at least it was for me.
I have a website, which has an on screen width of around 800 pixels. Now I don't want to change that as I am perfectly happy with it as it is, however, the problem I'm getting is that mobile users aren't able to scroll to the right, so they obviously can't see the rest of the content. As far as I was aware from previous sites that I've built, the scrolling is a default feature if the site is larger than the screen, so what's the problem here?
I have this code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Which I suspect may be the problem? Any way to fix this?
i made a responsive web page with media query.
view on mobile device it auto zoom though i have not defined to zoom.
while used meta content "width=device-width" it looks like it is viewing on desktop browser after that user have to zoom out to see the actual view.
Use the below meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Well, I can't release the URL for the site (not live yet), I was running into issues where the website won't scale to the device screen. For instance, I want the entire website to fit on a mobile, and tablet device without user having to manually scale it down. However, when you view the site, it's zoomed in. Below is the viewport tag I'm using. Any ideas?
<meta name="viewport" content="width=device-width, initial-scale=1">
There is no max-device-width value for width. It has to be only device-width. So it should look like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a problem with my web page not wanting to resize according to a phone's width...at least not the whole page.
The example of the page can be seen at: http://sibincic.bobr.si/index_table.html
If I try it on an HTC Desire which has a resolution of 480x800 it resizes it but not all the way.
If anyone has any ideas what I should do please let me know.
You must use that sentence in section, and use bootstrap responsive CSS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">