I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200.
When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values, my website looks perfect on my Desktop PC(22 inch screen). But when tested on Samsung Tab A8 device, it breaks.
And Samsung Tab A8 is not in the list of simulators in Google Dev Tools. So am confused regarding the width and height that should be used in media queries. What should be the value that I should use for testing in Google Chrome in my desktop PC.
The issue is caused by the difference between Hardware Pixels (physical pixels) and Software Pixels (CSS pixels).
They are not the same!
High-resolution mobile devices have a high PPI (pixel density) to ensure sharp and clear edges. However, it would be hard to read text on such small displays with such high resolution. As such you have a "technology" implemented called DPR (Device Pixel Ratio). For most high-resolution devices it is 2. That means, that for every CSS pixel you have 2 physical pixels. In other words, your tablet has only a resolution of 960x600px CSS-wise.
An easy workaround would be the usage of:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
That ensures that the hardware pixels are the same as the software pixels. Note, that you harm User Experience and possibly make it harder to read the text for users.
Related
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices.
My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width)
I'd be glad if you guys could clear this up for me.
Yes, it should render the same.
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
So I have noticed that a website I created looks bigger in Chrome than it does in IE11.
I couldn't figure out why. The zoom was set to 100% in both browsers.
If I go to http://viewportsizes.com/mine/ it reports the following viewport sizes:
Chrome - 1280 × 619 and IE11 - 1920 × 906
My question is why does this happen? How can the two browsers report back two largely different sizes?
Please tell me what device are you using? (IE Version, Windows Version, Device size)
Probably you use a mobile device (like 10 inch tablet) with Full HD resolution. Unfortunately I have no such Windows device, but this is a common behavior of mobile devices and chrome/firefox.
The reason shortly is that viewport does not represent the screen resolution and is mostly optimized for better user experience. Here I mean, that for an 10 inch device, browsing webpages in full resolution would result in a non readable webpage, a short example you can find here
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
More details about viewport you can find here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Note that IE is 'integrated' with the operating system, meaning, that DPI settings on your device also should have influence on IE (icon text size on your desktop and context menu text size is probably the same as a text in IE).
I like to use Firefox 'Responsive Design View' to emulate multiple mobile devices on my desktop. But I'm in doubt about one thing.
As far as I understand iPhone with Retina use 2 physical pixels per one CSS pixel. And Firefox 'Responsive Design View' do not. That mean that if I want to emulate iPhone 4 screen with resolution 960x640 I actually should use FF RDV preset 480x320 (and add preset 568x320 for iPhone 5). Right?
You're right that you should use the 480x320 viewport size, as all sizing measurements are based on logical pixels not the screen's physical pixels.
If you want to thoroughly test the site for retina content, and you don't have a retina screen, change the value of layout.css.devPixelsPerPx in the about:config page to 2. -1 is default. Note the UI will all look huge, but this will properly kick in pixels per px media queries, etc.
I just tried the devPixelsPerPx tweak along with RDV, and it works well - RDV looks like a great tool!
I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)
If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?
Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?
That's an intended behaviour.
Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.
As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.
<meta name="viewport" content="width=device-width" />
Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).