I am using max-width: 768px to change looks on my website. But there are many high resolution devices on market (4K Mobile phones etc). How can I detect them? should I use orientation portrait? Or can I specify a aspect ratio as a code? What is the best way to catch all devices for responsive web design?
You have multiple options for this problem:
Within your media query you can test for the device width, resolution (pixel density), orientation, aspect ratio, pointer option and many more. See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for a full list of options.
It is recommended to support your implementation by feature and not by environment. For example you can target dark/light mode or if a device supports hover events instead of checking for phone, tablet, desktop, tv, gaming console …
Also you can combine different CSS units like em, vmin, vh, vh, % to get relative measurements.
This in combination with CSS grid can already solve many problems without defining a media query.
Of course in the end you probably still end up with some media queries. For that I recommend to pick 2-4 common screen sizes even though this is no guarantee that it will cover all devices.
I can also recommend you these episodes from The CSS Podcast
#rules
Preference Media Queries
Related
I'm actually creating a small html/css page with 0 CSS framework, and I'm building all my media queries from scracth.
I'm wondering if it's normal to have so many breakpoints to cover, I mean when I use Bootstrap for exemple I just set the col for xs, sm lg ... and that's it.
Here I have to cover every breakpoints, from max-width 2560px, 1680px.. until small device, I even have for iphone 5, Iphone 6, Iphone 7 (even breakpoints for landscape when you turn your iphone), Samsung etc ... as they don't have same pixels.
Is this normal when you building your responsivity from scratch or I did something wrong in CSS ?
Your breakpoints should be based on the content of your site. You should test your layout, irrespective of device, and once your layout no longer looks good at the given screen size, create a breakpoint and update the layout! Then keep going up (if you started with mobile) or down (if you started with desktop) until the layout looks like it could use another change...
Bootstrap uses breakpoints that work for most average scenarios but yours may be different. Bootstrap basically provides "phone", "tablet", "desktop" and "wide desktop" breakpoints pre-defined for you. It's merely a suggestion though.
Bootstrap breakpoints are already set for XS SM LG, they are defined in pixels as:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
You can change all of these break points BEFORE you download Bootstrap in the settings
But, you cannot add more breakpoints. The only way to add additional breakpoints would be to write your own.
edit:
When writing your own breakpoints, most devs do not write one for every single device. you can usually cover a few devices with one set of css styles. so choose some that are close together, and format the page to expand across a few devices. For example, Iphone 5-6-7 and android devices within those widths can be grouped, then maybe add a change for the 6+ 7+ and other devices in those ranges.
have a look at this graph for the best groupings of breakpoints
If you need that many breakpoints that indicates your layout does not resize well.
If you need different breakpoints for different iPhones my guess is you are using absolute values for widths and other UI elements. You probably need to make better use of relative (%) sizing or look into using flexbox for layout.
There are more resolution variations than you can imagine. Your layout should "stretch" and "grow" well between a range of resolutions, using breakpoints just for making large sweeping layout changes. Breakpoints work best when used for things like changing the number of columns or moving a nav bar from the top to the side on desktop devices.
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
I am creating a responsive game web site. for that i don't want scroll bar in any resolution. i am using to test my website mozila "Responsive design View". in that they provided some standard screen resolution. I am OK with all resolution except 1280x600, And now my quesion is ...
1. Is there any devices in this resolution?
2. How many people are using this type of devices?
3. is it necessary to consider this resolution while creating responsive website?
Please replay me. Thanks in advance.
When it comes to desktop computers, screen resolution means nothing because a user can change the size of his browser window to any width and height. This means you may have a "resolution" of "1280x600 pixels" one moment, and "1281x599 pixels" the next.
Responsive design should gracefully accommodate all browser window sizes. All you need to worry is break points (i.e. your media queries), where page layout changes. Most designers typically set 2-3 break points to match the most commonly used screen sizes.
I've never heard of that exact ratio, 1280x600 pixels.
Here are some quick statistical resources:
https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
http://www.w3schools.com/browsers/browsers_display.asp
http://gs.statcounter.com/#resolution-na-monthly-200903-201203
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)
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.