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
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.
When I open my page on mobile, it is automatically zoomed in to probably about 125%. It looks fine when you zoom out, but obviously I want it to open at 100%. I have this:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
but was wondering if it's possible that it could be a different issue. My body width and height are currently styled at 100%, but I tried switching to auto and that did not help the zoom effect.
this question has an answer here: Webpage starts zoomed in on mobile devices
<meta name="viewport" content="width=1000">
I had the similar problem and just adding height to the meta tag solved my issue
<meta name="viewport" content="width=device-width" height="device-height" initial-scale="1" , maximum-scale="1" />
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" />
Here is my website, www.offergrind.com
I made it fully non-responsive but the problem is that if we view it in mobile it is displaying the top left part.
Is there any code such as
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
What should i do to make the website to display fit in mobile view ?
Start with this. At minimal, it will make your website fit the device, but everything will be sized down.
<meta name="viewport" content="width=device-width">
You should also look in CSS pre-processors, I was blown away by how many CSS files you reference.
I would get rid of the viewport meta tag altogether. If your website was not designed to be responsive, it will only make things worse. See this for more:
Stop using the viewport meta tag (until you know how to use it)
Use the below meta tag for your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The meta tag above explains everything:
width="device-width" width of the website is equal to device width
initial-scale=1.0 means the website will not scale to fit the device screen
when we set minimum-scale=1.0, maximum-scale=1.0 and user-scalable=0 means user will not be able to scale the webpage (it will turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. )
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.