Can't get a real value of screen width on my phone - css

I use #media screen and (max-width: 600) on my site. But my iPhone doesn't react on it. He displays full site like my desktop browser does. I added this snippet of code:
alert(document.documentElement.clientWidth);
alert(window.innerWidth);
When I go to the site via my desktop browser, it shows actual width of my window. But when I do it via my iPhone, it always says that screen's width is 980, both of the alerts. Why does it happen? What of #media can I use to make my site responsible, because (max-width) and (width) dont work for me

<meta name="viewport" content="width=device-width, initial-scale=1"/>
This helped me.

Related

Site is not responsive in mobile, but is responsive on resize

I am using css media queries to make a web page (currently not published) responsive. However, in Chrome Inspector mobile device mode, the site is not response. However, if I physically resize the browser window, it is responsive.
The media query begins like:
#media screen and (max-width: 767px) {}
Put this in the <head> of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta tag simplifies something that's pretty dicy, directing the browser to behave a certain way, instead of the browser trying to estimate what the right way to display a page is. Having CSS breakpoints, as you discovered, may not be enough--for some designs and browsers, it will be fine, but it's up to the browser.
width=device-width uses a custom value (device-width) that is what it sounds like--set the width of this viewport to how wide the device is. initial-scale means something like setting zoom to 100%. So, together: let the viewport be as wide as the device, and don't zoom in or out.

Is it absolutely essential to use viewport tag to adapt a web to devices?

Hello friends to see if someone gives me a hand to tailor my web devices.
I tried to media queries and my phone (I have only one, Motorola Moto G) I managed to adapt, but I have not used the viewport tag. I just have been adapting the CSS through this media query:
Landscape:
#media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
#media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
On my phone the web is perfect, I managed to adapt both landscape and portrait. But what happens is that I have only this phone and do not know how the page will look in other devices, putting the viewport tag is deformed giant and completely:
<meta name="viewport" content="width=device-width, initial-scale=1">
The problem is that I'm pretty lost with this, because to prove my page this also deformed giant appears:
http://www.responsinator.com/
The question is, resolution is 1280x720 Moto G? Why to place the viewport tag goes so distorted? I do not understand, see if someone can explain. I tried to find information on the Internet but I can not understand it.
Thanks
What I think you're asking is that:
Is the Viewport Tag (the meta tag) absolutely essential because it is messing up your view of your website on your device.
To answer this, lets look at the viewport tag itself:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to set the initial scale to 100% of the viewport window, and the width of the body element to that of the device, so it is telling the browser to correlate the width of the webpage body element to the same width as that of the device viewing it.
In short, no the viewport tag is not absolutely essential, but it is an extremely good idea, although you can change the settings on the content part of the tag such as
<meta name="viewport" content="width=500, initial-scale=1">
or
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
You can do no wrong reading up on the Mozilla Developer Network page on the topic which will tell you the possible values you can set in the viewport tag. These are entirely seperate from the CSS display values and are used as a default for how the browser renders the page.
I can not give you more specific advice without you providing a more specific issue in your question

CSS mobile website - why so high values?

To fit my WP website for mobiles I use
#media screen and (max-device-width: 780px) {}
However, to fit everything properly I have to use giant values, like font-size: 4em;, header {height: 200px;} (when it's 100 on the desktop version). Is it normal?
The main problem is with Gallery plugin - by default thumbs have size e.g. 200x300, and on the mobile version they are really tiny!
Or maybe there is a better way to make a website mobile?
If I had to guess, I'd say you are not setting your viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Nowadays, most mobile phones have a very high dpi; for instance, the iphone 6 plus has a full 1080p display, so when you make something 100px tall, it is only 1/19 of the screen height.
By setting the viewport to the device-width, you are telling the browser to render the page using a more standard dpi (for instance, the iphone 6 would be something like 424x600ish). That way, all of your content automatically scales.

Meta viewport not sizing correctly

I'm a relative newcomer to CSS, and I recently figured out how to use #media to query for a device or browser size, and help make the site responsive, but I've been having a lot of trouble with the <meta name="viewport"> tag (as I see a lot of other people have too).
The shift to the mobile view triggered by #media only screen and (max-device-width: 680px) is working just fine, but so far, on both iPhone and Android phones that I've tested it on, the initial view is partially zoomed in. For the mobile view version, I have the body, the container div, and the child elements sized at 540px or less and then used the following tag in the head of the html doc:
<meta name="viewport" content="initial-scale=1, width=device-width" />
But like I said, when I visit the site on a mobile device (like my Razr M, which has a screen resolution width of 540px), the viewing area shows up zoomed in, so that what I see is about 2/3rds of the full 540px of content, starting from the left. But then, if I manually zoom out, it stops at the correct size and everything looks good. The test site is up at http://thereisnomountain.com/indextest.html, and it relies on one stylesheet at http://thereisnomountain.com/style/tinmtest.css. Help would be appreciated!

Responsive site viewport issue for different devices

I have created a responsive template and I have the following problem.
I created a media query for resolutions smaller than 480px on desktops and smaller than 540px for phones. On the desktop it works fine, on the phones it works as expected.
#media only screen and (max-device-width: 540px),
screen and (max-width: 480px) {
so, whenever I open the site on a tablet, I get the desktop version loaded (as expected) but with a zoomed-in result.
If I use the following code, with maximum scale at 0.6
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=0.6">
I get tablet view correctly, but then in phones it's zoomed-out.
I have searched everywhere and tried every combination in order to make this work. From what I realize I want maximum-scale=1 for phones and 0.6 for tablets. How can this be achieved?
Thanks in advance for your time. Hope it can be done.
edit: removed url.
That's because the maximum-scale is set to 0.6. This means the website is showed at 60%. Try leaving that out or set it to 1.0

Resources