I've placed this tag on my website:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And on Firefox and Chrome for Android the site looks like this:
While I'm expecting it to look like this:
What am I doing wrong?
I've also tried the solutions in this post, but nothing helped.
This tells the browser to render the page at the same width as the device's screen has pixels:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
It sounds like you'd prefer to render at some other width, like maybe 800px:
<meta name="viewport" content="width=800, initial-scale=1.0" />
Related
when opening a website in iPhone Mobile Safari The full screen does not appear.
I tried this, but the problem still exists.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
What do you mean by full screen? Do you mean like you want it to be mobile friendly? or...
Have you actually tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0">? instead of all those over things that you added in.
my current HTML with this viewport:
<meta name="viewport" content="width=device-width,initial-scale=1">
is providing undesired results such as these:
While deleting <meta name="viewport" content="width=device-width,initial-scale=1">
provided me with another undesirable result as text gets unreadable, like this:
What am I doing wrong?
Have you tried this?:
<meta name="viewport" content="width=device-width" initial-scale="1">
Maybe you need to declare correctly all tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So i have problem with a different display website on PC and mobile phone.
My viewport looks so:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
window.innerWidth on my Samsung Galaxy returns '360', but:
so looks element in google chrome device mode
but that's how looks it actually on my device
So what's the matter?
Try to add comma before maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
I have that meta tag in my website www.ssd-vergleichen.de
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
To prevent the device from initial zooming into the website.
When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%.
What did I do wrong? Can anyone help?
Thanks in advance
Edit: With using
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?
Edit2: No, it also doesn't work with iOS http://iphonetester.com/
Try this :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Have you tried
<meta name="viewport" width="device-width">
As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?
Update
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.
From the W3C Use Meta Viewport Element To Identify Desired Screen Size
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
with no ;
I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width
Like so:
<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">
This solved my problem.
Try this:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
In CSS put this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
You should write
<meta id="viewport" name="viewport" content="[your_content_params]" />
I tried this and it worked.
I have a block of html code, which is mainly meta tags. I'm trying to re-design my layout for mobile devices, so I want to know if the meta tags that I'm using are necessary for a mobile layout. The block of code is provided below:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>ConquestRealms - Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="cleartype" content="on">
whether or not they are necessary depends on what "mobile" device you are trying to target.
I've used as little as:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and achieved decent results across a number of mobile devices using just Respond.js and #media queries.
may be helpful:
http://www.alistapart.com/articles/responsive-web-design
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices
https://github.com/scottjehl/Respond
What you have is already pretty good, but do not forget to add <!DOCTYPE html> at the top of your html file. I found that there have been cases where this has significantly effected the look on a mobile device.
I like to include design meta-tags also. Not mentioned in previous responses. They allow full screen display and change the color of the browser bar. Nice!
<meta name="theme-color" content="#ff0000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Web App">
<meta name="apple-mobile-web-app-title" content="Mobile rules">
<meta name="apple-mobile-web-app-status-bar-style" content="red">