Is there a possbility to disable the initial zoom you get when viewing a page with your smartphone?
I don't want to disable zoom, I'd just like the user to view the entire page (=> width) when loading it and not just a small rectangle.
I've tried several solutions suggested by others but none of them worked for me.
Okay well that was easy. I slightly tweaked a solution I found from Google. Here's the only code that worked for me:
<meta name="viewport" content="width=960; user-scalable=yes;" />
It sets the default zoom to 960px (change to the width of your page) and still allows the user to zoom in/out.
EDIT: It looks like it allows zoom on the default Internet Browser (SGS4) but it disables zoom when using Google Chrome.
Try add this to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", target-densitydpi=device-dpi />
Where initial-scale is how much you want it to be initially, maximum-scale is how much the user is able to zoom, and user-scalable is whether or not they are allowed to zoom.
The target-densitydpi=device-dpi is needed for mobile devices with a high dpi (or resolution) such as the Samsung Galaxy S4 but it is added to the end of the meta because devices such as the iPhone does not recognize it.
I haven't tested this myself on an SGS4 because I do not own one but if you want to be specific on the initial-scale of the device, can try adding media="(device-width: 480px) and (device-height: 800px)" after user-scalable where 480px is the viewport width of the SGS4 and the 800px is the viewport height of a SGS4.
So it should look like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", media="(device-width: 480px) and (device-height: 800px)", target-densitydpi=device-dpi />
Add this to your head <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Read up here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Related
I am developing an app with Angular and would like to be able to shrink my screen on mobile devices even with touch. Zooming in is possible via the viewport, but zooming out does not work.
My viewport looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
What do I have to do to reach my goal? Do you have any ideas?
you can remove or change this property to "user-scalable=yes". or you can write it like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This will allow users to zoom out and shrink the screen on mobile devices.
I have a page, I want to be it look like this in mobile.
But when I open it in mobile it is like this.
How to do that so that it is auto zoomed.
Note: If the user tries to zoom out & zoom in it should not work.
Use CSS media queries and set the wrapper in
(max-width: /*your desired viewport*/)
and control the width and font-size of your wrappper.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
If you don't want users to zoom in, use this meta viewport
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The best thing to do is just copy:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> in head tag.
This will auto adjust according to the screen width & height.
Media Query May / May not be added, as per requirements.
My website is all messed up for my iPhone and Samsung Galaxy S2. I have created a sort of responsive website which adjust the sizes of everything properly apart from the sizes of each font, more specifically when in portrait on my iPhone 5s the text is too small, however if viewed in landscape the font-size is just right, same for my SGS2. Also another problem I have is when I load the page for the first time on my iPhone and SGS2 I have to zoom out first because it shows only a certain percentage of the page.
Please help, I have been trying to sort this out for ages now. Here is the link to the website I'm talking about.
Oh, also when I view the website on my laptop the font-size is just perfect but then I guess the window isn't to scale.
Let me know if you want me to include all the HTML and CSS
You could use some viewport properties :
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
You can also set stylesheet for handeld devices.
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
Documentation links below are useful :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.html5rocks.com/en/mobile/mobifying/
I have a problem with the displaying pages of my project in tablet "Galaxy note 10.1". The page doesn't have full width background-image of body element, neither for example footer element. In every browser this worked well, but not in Galaxy tablet. I've never optimized for tablets and I don't know how to find solution for this bug.
Is there way to set width of element to 100% in galaxy note?
Thank Piklis
Maybe You are talking about
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Basically I have a site at the moment that is width 940px, at the moment I just need this site to be viewable on iPad whilst I begin adding in media queries to tailor the site for each device. Is there a meta tag I can use so that my site scales down when on iPad?
I would use this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
See developer.mozilla.org/en/Mobile/Viewport_meta_tag/.
It sets the width and height to the device's width and height, sets the initial zoom to 1, and the maximum zoom to 1 (therefore making the page not zoomable).
EDIT: If you want the page to still be zoomable, remove maximum-scale=1:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I use this in all my Mobile Sites.
The iPad has a 1024x768 screen. You should be fine before adding in media queries.