I came across a strange problem while I was testing a simple webpage made in webflow, for responsiveness. Now this is not a webflow question, but I think the problem has something to do with the resolution, physical screen size and pixel density. Just it's not clear to me what is happening.
So there were 3 media queries. One for mobile/iPad (we will ignore them since they worked as expected), laptop screen(1280 to 1024px) and large desktop screen (equal to or above 1920). I styled the site on 1920 and the chrome Dev tool also rendered it for lower and higher screens as I expected. But when the site was viewed in a MacBook whose resolution is much higher than 1920 but the physical screen size is much smaller than a traditional monitor, rendered the media query styled for laptops. I expected with its high resolution, it will display the highest media query.
Why this has happened and how to get around this? Or this is actually okay and no fix is needed?
Related
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/
I might be completely off the mark, but here goes:
I tried testing my website with various modern phones and tablets... and the result is that my media queries never come into effect because these phone/tablet resolutions are too high.
Things like #media (max-width: 767px) { }, which I want to display for phones, never come into effect because of this resolution problem. Any ideas on how to solve this? This can't be an uncommon problem so I feel like I'm overlooking something.
Configured correctly, "retina" screens take the increased resolution into account when rendering web pages. I'd take a look at Bootstrap, purely as an example of how to setup your page to be fully responsive.
You'll find once you have this setup, it will work regardless of the actual physical resolution of the device. For example, the first iPhone to have a retina screen (iPhone 4, perhaps?) had a "width" of 320px, regardless of the fact that it's resolution was far higher than that.
I am a beginner and have been working on my first responsive site with media queries.
A site I was reading told me some standard ones were
768-1024 for tablets
320-480 for smart phones.
I used these to begin, However, when I open it with my note 3 I get the tablet version and the menu is too small for it. This same result happens with an iphone 4.
Even when I changed the smart phone range to 320-767, both phones still are using the "tablet" layout. The note 3 has a width of 720 correct? so with this it should force it into the smart phone query right? Am I misunderstanding this? How can it tell the difference between something small but with a high resolution like the note 3 to a tablet so that I can have larger elements on the note3?
If someone could explain to me what is going wrong here I would gladly appreciate it.
The note 3 has a 1920x1080 resolution, not a width of 720 pixels.
Instead of selecting pre-defined values for targetting specific devices, it is recommended to use values suited to your content specifically. That way, all devices can expect an appropriate layout, usually with more simple media-query rules too. There are just too many devices out there today to pick specific values.
Yeah #rwzy 1920x1080 I should say. He must design first in mobile then going larger on desktop and tablet, He must choose Breakpoints based on the content not on defines screen sizes.
If you are creating your website based on the screen sizes only well use media queries also if you based it on resolutions also media queries best suite your problems. try http://www.hongkiat.com/blog/css-retina-display/
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I have a media query -->#media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only #media screen and (max-width: 768px).. how do I go about it?
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.