I'm building web application using RWD. I've written media queries for different resolutions say 1024, 768 and 320.
I'm using below metatag to decide page width
<meta name="viewport" content="width=device-width, initial-scale=1" />
There are few devices e.g. iPhone 5 with resolution - 1136×640. When I'm opening my webpage in iPhone its displaying 320 layout in landscape mode where as its resolution says its 1136px wide.
I know it has CSS pixel ratio as 2 but not sure logic between CSS pixel ratio, media query width and device resolution calculation.
Is there are any article or link that explains this and will tell why its displaying 320 layout for iPhone.
Thanks in advanced.
Try using this meta declaration instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Related
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
I am trying to create a notification container with CSS that is the same size as notifications on iOS on my iPhone 6S.
I have created screen grabs of portrait and landscape. When I view the images the sizes of the notifications in pixels are 718x262 and 841x262 respectively.
When I create the notifications with the same height (262px) they are displayed on the device differently 200px in portrait and 357px in landscape).
https://www.dropbox.com/sh/bmkv2gua62r4zly/AAC0xPZIURWZFwCb9pFzDk1Da?dl=0
Adding viewport meta tags fixed the issue
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
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??
I would like to adjust initial zoom level for mobile devices(or certain resolutions) so that the content doesn't expand beyond the view space.
Is there an easier way than using media queries?
thanks
This will adjust your website to device width and remove user zoom:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
Note: don't use maximum-scale if you still want your users to be able to zoom.
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.