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?
Related
i made a website responsive but when it loads into the phone it is zoomed automatically i applied view port as well but didn't find solution.
view port
j query
these doesn't solve my problem.
any one please help to fix this out
I understand your problem as I just solved a similar problem myself.
Method 1
You can specify the amount of zoom that is applied by targeting a specific device group. try adding this to your index.html
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
This should keep your website from trying to scale with zoom.
If this does not work then try targeting specific devices with css
#viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
Try playing around with the zoom and width values to find your device range.
Method 2
Open Firefox on your laptop or desktop and go to your site. and in the firefox options choose responsive view. Then press ctrl+shift+c and hover over your page to select the full page container. on the lower right hand side there will be a window with css. There you should find the element that is zooming in.
Also please update your question with your website
This website...
http://www.collegefundingremedies.com
is responsive on my computer, and displays correctly when I Inspect Elements through Google Chrome and click on the mobile the different mobile views, but when I open the website on an actual mobile phone, everything is unaligned and badly formatted. What am I missing here?
I have the...
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
in the index and media queries set up, so I'm not sure what's going on at all. Please help.
I'm busy developing a portfolio website. This website should behave responsively, ie: the website should be fully displayed when browsing on smaller screens.
I have added the meta viewport tag, but it does not seem to work. At the moment you need to scroll horizontally to view the full content. I want it to be initially scaled to the width of the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
I guess I am missing something, but no clue what..
I was having all kinds of problems with viewport. Finally I just removed all traces of that stupid thing, and everything seems to scale correctly now. It might be that current mobile browsers are smart enough to scale without use of viewport. Of course I am using media queries too.
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">
I am making a small SVG widget aimed at iphones with a fixed footer.
The problem is I want to use native pinch & zoom that only affects everything bar this fixed footer.
However I cant use native pinch & zoom if i use
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Which is needed I believe to standardize the 320px width across mobile devices?
My thought was then (dare i say it) an iframe for the pinch/zoom stuff above the fixed footer but you need 2 fingers to scroll an iframe and 99% of users wont know that (unless there is a simple js fix for that?)
Any help/guidance much appreciated.
Adi.