My mobile device is HTC One X, resolution: 720x1280
I need to do responsive web-page
in html i write <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
But in browser i have 360px width. I have checked it using $(window).width() or document.width
It renders at 360px wide, but the depth is 720px. In other words, it uses 4 pixels to display 1 normal pixel. So all normal graphics will appear blurry as it's upscaling the image twice the size. So the solution would be to create twice as big images, and scale them down 50%.
To the best of my knowledge, the syntax when declaring the viewpoint should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Note that it uses commas instead of semi-colons, and there isn't any anything directly before the closing />.
From what I've read, using semi-colons may cause issues with certain browsers.
Good luck!
That may be your compressed resolution, not your scaled resolution.
If you look at the specs for your smartphone, you will see that a 4.7inch screen has 1280px by 720px resolution. See specs. That is approximately the same resolution as my 13" Macbook, which is impossible since my Macbook is over twice as wide. Hence, they are marketing the compressed resolution, which is not the resolution that browsers consider in handling media queries.
Related
When resizing the browser to the width of different mobile and tablet screens, the font seems fine readable and big enough, but when i check the website on my tablet the font seems smaller and not enough readable.
I thought that the browser is a real indicator of what the website should look like in smaller screen devices, but this seems not the case, as font looks small in my tablet screen.
So why font is not shown on the smaller devices as the same as the browser when resized to the same size??
The viewport meta tag tells the browser that your site is responsive ready and allows the browser to scale your site to device pixels rather than actual pixels. This should emulate a narrower viewport with the content appearing larger on screen at a more natural size. This tag should be placed in the head section of your HTML file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please see my demo video: https://youtu.be/8BQ_UgMGK2E
I'm convinced that rem is great for components, and em for sub-components, but seemingly my height:5rem is corresponding to something other than root font-size:16px
I cannot figure out why device / mobile emulation seems to scale the root font-size, as rem should be consistent at 16px, regardless of how many pixels are on the screen
Meta tag just says charset utf 8
window.devicePixelRatio is a consistent 2
As I mentioned in the comments above, you can resolve this by adding a viewport meta tag to the head element of your document.
For instance:
<meta name="viewport" content="width=device-width, initial-scale=1">
In doing so, this allows you to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.
For more specific information, here is a related question that I answered. The answer goes into more detail regarding the difference between max-width and max-device-width.
The answer, as mentioned by Josh Crozier is to add
<meta name="viewport" content="width=device-width, initial-scale=1">
in the index.html <head> section
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
An explanation of layout viewport and visual viewport can be found here.
I have read here and here that one should use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
if one wants to optimize a webpage for mobile devices.
I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:
width=device-width
The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.
initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.
Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?
To give a more concrete example: Consider the following webpage
<!DOCTYPE html >
<html >
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
</head>
<body>
<div style='background-color:red;width:100%'>Test</div>
</body>
</html>
then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:
the CSS layout, especially percentual widths, are calculated relative
to the layout viewport
I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?
Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.
Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.
Also from the same document:
Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.
I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.
Mozilla goes on to say:
If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I'm not a fan of this technique; I think the cure is worse than the disease in most cases.
It is because it is rotating page rendered in portrait mode. You will have to redraw page. Here is similar question .
I think that the problem you have is confusing the device-width and screen/browser resolution.
as in the example you post:
These pixels have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.
In other words, width/height mirrors the values of document. documentElement. clientWidth/Height, while device-width/height mirrors the values of screen.width/height. (They actually do so in all browsers, even if the mirrored values are incorrect.)
they are retina display and the difference is only in bigger pixel rendering from the iphone, so the browser will rendere full-screen even with 320px device-width in landscape. the big problem with iphone is that this difference don't change between portrait/landscape.
and
You can set the layout viewport’s width to any dimension you want, including device-width. That last one takes screen.width (in device pixels) as its reference and resizes the layout viewport accordingly.
where the device pixel (The screen) is different from visual viewport
<meta name="viewport" content="width=device-width;initial-scale=1.0" />
there device-width will have always 100% screen width.
<meta name="viewport" content="width=320px;initial-scale=1.0" />
there you should test if there are no changes on iphone or the DIV will extend out/gap of the screen in landscape
i think this source is correct only using media-query with device-width (not visible on iphone), because if you use normal media query you can see that the effective pixel-ratio of the browser rendering changes from 320px to 480px
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
I am trying to force all mobile devices to have a rendered screen size of 640px wide. I've used:
<meta name="viewport" content="width=640">
Unfortunately, when I emulate screen resolutions in Chrome, the page sizes completely differently between different devices.
If I emulate a Note 3, it looks far different than an iPhone 4.
I've also tried doing:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But this only works for any screen who's initial scale or pixel ratio is set correctly. For example, the note3 has to be set to initial-scale=.5623 for the page to look like it's 640px wide, but that's not the case for the iphone.
What am I missing??