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.
Related
I'm at a loss. I don't understand how to use style html and body in conjugation with:
<meta name="viewport" content="width=device-width, initial-scale=1,"/>
to make my website(huskybiz.com) not be zoomed in on load on mobile and to have a min-width of 800 and max-width of 2000. I've been trying for days. Any help greatly appreciated.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
set user-scalable attribute to no (user-scalable=no)
if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.
you can also use maximum-scale=1 it also won’t allow the user to zoom.
Reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
DO you know what may be the problem? After adding the code below in the header the viewport will fit to screen in chrome at 320px but will not fit to width on the iphone Safari (there seems to be a margin at the right). However on an Android device it displays correctly.
<meta name="viewport" content="width=device-width, initial-scale=1">
Can you help? Thanks
Maybe it works with maximum-scale and user-scalable attributes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
My site's layout isn't responsive so I want it to shrink my whole layout if the user is viewing on mobile devices. I'm using this viewport code <meta name=viewport content="width=1024"> but it won't shrink my layout on mobile view. Anyone know how to fix? my site is http://www.sailormoon.xyz
try this.
<meta name="viewport" content="width=1024, initial-scale=1, minimum-scale: 1, maximum-scale: 1">
or
<meta name="viewport" content="user-scalable = yes">
I'm having a hard time finding the right viewport that works for all phones. What I'm trying to do here is that my regular website (not mobile) to scale to fit the window without having to pinch zoom out. Any ideas on viewports?
My current is.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This will work on iPhone.
<meta name="viewport" content="width=device-width" />
How is your website's layout? do you have a specific width for your content (like apple.com)?
if so, use it in your viewport meta tag.
if your website is flexible, like amazon.com for example, use content="width=device-width, initial-scale=1.0" and give body width:100%;. you can do that with a media query if you don't want to affect your desktop version. (http://stephen.io/mediaqueries/)
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.