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">
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 problem. On my site http://www.veniria.esy.es when I'm swiping out the navbar, the content should move to the right with the navbar - and it do so - on PC. When I'm trying to swipe out the navbar on smartphone, the whole page scales down, and I don't know why. Can somebody tell me what am I doing wrong?
You haven't set up your viewport for mobile. Just add this to your <head>
<meta name=viewport content="width=device-width, initial-scale=1">
I tested on iPhone and it didn't scale down to me.
However, I noticed the viewport is not mobile friendly.
Try putting this on inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
I was building a non-responsive website whose minimum width is 1600px. How to center all content and let all content be visible while viewing on mobile? I set the meta viewport to <meta name="viewport" content="width=1600">, but the content is not center on mobile. And there is a horizontal scrollbar appeared. (on iphone 5) Thank you.
Use <meta name="viewport" content="width=device-width, initial-scale=1.0"/> to render the web page in respect to the mobile display.
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.