I've been researching for a while now, but there's still something I cannot understand.
Many websites (1, 2) suggest some common breakpoints to use for media queries when we develop for smartphones.
Despite the debate between pixels, ems or rems (I usually use ems), the problem is that nowadays smartphones have increasingly high resolutions, up to 1080p or even 1440p.
It seems to me that this makes pointless differentiating the different types of devices using media queries, since modern smartphones have the same pixels width of many older desktops.
Writing a media query using #media (max-width: 600px) (or 37.5) doesn't make sense anymore, since (I tested it using my smartphone) it doesn't get triggered.
I cannot just increase the breakpoint level, since some older desktops or tablets have a lower resolution than modern smartphones. Furthermore, I would have an huge breakpoint going from 0 to, let's say, 1080px (which is still not enough).
I know about #media (hover: ...) but I didn't see anyone suggesting it for breakpoints and I couldn't find it anywhere peeking into some big websites' CSS
Am I missing something?
How do modern websites distinguish between smartphones and desktops?
Please don't attack me if I'm asking something stupid... I know that I could missing something easy but I cannot just get it. Any answer would be appreciated.
Thanks in advance.
Even though mobile screens might have high resolutions, it doesn't matter - because the pixel density is the important thing here.
As long as you set your viewport to support mobile devices, media queries would work as you expect (using small numbers such as 600px).
You can read more about the meaning of CSS pixels on MDN.
Related
Good day everybody! I am currently working on a web app, and I am using media-queries, in aims to support mobile and desktop.
I have tried to use max-width: 414px as my first break-point, to work on the current iPhones and other phones with smaller screen sizes. However, even after rereading various forum posts, responsive web design tutorials, and web documentations, to no luck, it wouldn't work the way I need it to.
See here that whenever I use max-width, even on screen sizes of 414px, or lower (I have tried), it really wouldn't work. The styles wouldn't apply.
Now, when I would use, min-width, it does work, however, I've read it's better RWD practice to use max-width for better functionality.
What are your suggestions? Thank you!
So I think your problem is that you are in zoom mode (like 2x or 3x). If you are in Safari responsive mode, please remember to go to use View > Actual Size , make sure it's not zoomed in in any way, as this will surely affect the media query used. Have a good day!
4k phones are still new in the market, but I suppose it's only a matter of time the tech becomes more widespread. Should I be concerned when it comes to designing responsive websites?
Is there any other unit of measure that I should use that's not px to avoid issues in the future or are my worries unfounded?
Short answer: Your worries are probably unfounded.
Longer answer: I don't know the exact specs of some 4k phones, but the interpreted CSS-resolution of smartphones these days is in most cases much lower than the physical resolution. (see this thread about device pixel ratio). 4k phones will just have a much higher device pixel ratio. So if your responsive websites work on devices like the iphone 5 or 6, they will probably also do well on 4k phones.
That said, to be at least somehow future proof, I advise to follow best practices. Some examples:
Use SVGs instead of pixel graphics where possible, so the graphics stay sharp on devices with high pixel ratio.
Work mobile first and set your breakpoints where they make logical sense, not targeting specific devices
You should use % instead of px and use em for font-size
My phone (LG G2) has a viewport size of 360px 598px.
Col-xs aims devices smaller than 768px, so that means that wether the user is in portrait or landscape mode, he will have the same result, even though in landscape mode i could display more elements due to its larger width. That's why i wonder why the smallest media query is 768px in bootstrap, which doesn't take into account phone's portrait/landscape view.
Thank you for any clarification.
Although the LG G2 "could" display more information in landscape, thats not what resposive webdesign intended.
Bootstrap (and others respectively) did choose those breakpoints to create widespread groups of screen sizes/devices.
They decided to use the iPads width in portrait (768px) as their breakpoint between typical phones and tablets, which makes perfectly sense regarding the amount of work to do. Responsive webdesign is all about creating those groups of devices, to not have to code hundreds of versions for thousends of device types, and still be able to create an optimised view for most devices.
Of course you can still use customised versions, but the more viewport groups you create, the more adjusting and testing will be necessary (and soon enough you're back to useragent sniffing times)
I received a website layout in Photoshop for three different resolutions: 1280, 1024 and 640 pixels wide. As my experience with RWD is somewhat limited, I would like to get a better understanding of how a web designer should think in terms of size breakpoints, fluidity etc. (at the time of writing).
My specific questions, stemming from this project are:
Why would a designer go with these 3 resolutions, given that the project is a typical company website?
Generally, are these resolutions optimal or should I our ask for others?
(Wouldn't 1024, 768, 320 make more sense? Or perhaps I should be looking for "natural breakpoints as opposed to canonical?)
How should I think about implementing the 640 layout in regard to iPhone 3 (#320px) and 4 (#640px)?
Thanks for any help.
These seem to be the more common landscape resolutions, 1280 being a wide version for desktop, 1024 being normal desktop/land scape tablet, and 640 being landscape for mobile. Personally though, I haven't seen these exact resolutions for responsive frameworks.
I'll give you 2 cool responsive frameworks as reference. Skeleton runs at 3 basic levels: 960px+ (desktop), 768px (tablet) and <480px (mobile). I think these are really good resolutions to work with, particularly if you're new to responsive and are still accustomed to working with pixels. Alternately, you can use the Goldilocks approach which uses the same principles (desktop, tablet, mobile) but uses ems instead of pixels, and is designed with a mobile-first in mind (as in, you start the design from the small version, and add the "extra stuff" for desktop). For cool articles and stuff on responsive, I also would encourage checking out the This is Responsive blog.
iPhone design is special. Don't think of them as different resolutions. In it's thinnest state (portrait, but even in landscape it's the same state), you are working at 320x480 (older models). The above frameworks target this in their mobile states. Retina-using models basically work at this same "resolution", but double each pixel for the high definition you are used to seeing. Your main concern with your design here is in regards to retina-ready images. As for that, this SmashingMag article should clear things up!
They're probably targeting wide desktop, desktop and landscape phone formats. See: http://astronautweb.co/2012/01/responsive-web-design-four-states/
(I sure hope the 1024-wide design is not actually 1024 pixels wide.)
Im doing some simple styling between different mobile devices and was wondering whats the best way to change depending on the resolution.
As my application looks fine on low resolution devices, but on high the fonts to small and other things are to small as well.
I was thinking of one style sheet depending on resolution but was wondering if this was the best way or is there better ways to implemented this situations.
The devices are all blackberry from new to old hence the high and low resolution.
Is there anyway even just to scale content up if the screens bigger?
Thanks
You can use media queries to target different screen sizes in CSS.
Here's a list for Blackberry devices http://responsive.co.za/blackberry-specific-media-queries/
You can do all this using CSS3 media queries.
Here are some resources
http://brendanmckenzie.com/2012/06/there-is-no-mobile-framework
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://html5boilerplate.com/mobile
You should create media queries like they said but if you are doing this for a large number of devices and/or your css file becomes very long, I would do it with if then statements so that each device doesn't have to download a huge css file that contains all of the media queries for every device.