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)
Related
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
I am fresh new to CSS in general and responsive design specially,
I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :
#media screen and (max-width:720px){ etc ...}
That works ok and my footer is restyling well, my question is :
This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ?
I mean if i try with :
#media screen and (max-width:1280px){ etc ...}
To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ?
What is the correct usage, ? Thanks
Don’t worry about a device being mobile or desktop or whatever.
Media queries allow you to apply difference style sheets based on the window size.
If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.
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.
so, I want to do a "mobile" friend view of my site. Its liquid designed already, but mobiles need definitely different look. Now, how to detect if I visited it with mobile (iphone, ipad, android)? More specifically, I imagine it as if the screen width is smaller than a value (dunno that value), then thats considered a mobile client. How to detect, so that generate the mobile optimized CSS/HTML outputs? Maybe im too simple, but to me mobile client = smaller screen, and nothing more
There isn't really a great way. Before you used to be able to say if under a certain number of pixels then it is a phone. But now phones are getting both higher pixel count but also crucially large screens too. Tablets are as small as 7" now, but they could get smaller. Some phones are over 5" and could get bigger. Then there are things like physical pixels to css pixel ratios to think about.
If not screen size or pixel count, maybe it could be if it supports touch or not. But Windows 8 threw that on its head, as that supports touch on the desktop.
I would say it depends on the content rather than the device. Test your site using various widths. See when the width becomes sub-optimal for the content, and throw in a media query there to adapt the layout. I think a content first rather than device first strategy is more future proof.
Also remember that it may not just be a mobile that wants your mobile friendly layout. For example soemone could be using their browser in a small window, rather than full screen, or they could be using the snap mode in Windows 8, where the width is the same as a iPhone width at 320px.
Use media queries. Then you can detect if you are on a mobile device the browser will load the mobile CSS and if you are on a PC the browser will load the PC version of the CSS.
http://www.w3.org/TR/css3-mediaqueries/
Then you can develop the mobile device CSS like this way (supose the mobile have 480x640 pixels):
#media screen and (max-device-width:480px){
...
put your mobile device CSS code here
...
}
Supose you want develop CSS for tablets (1.024x768pixels)
#media screen and (max-device-width:1024px) and (orientation:portrait){
...
put your tablet device CSS code here when tablet has portrait orientation.
...
}
#media screen and (max-device-width:1024px) and (orientation:landscape){
...
put your tablet device CSS code here when tablet has landscape orientation.
...
}
And for PCs (1280x968pixels):
#media screen and (max-device-width:1280px){
...
put your PC CSS code here
...
}
I'm designing a Website for Desktop and iPad. The same website will be used for iPad and Desktop PCs.
Site's design width is 1024px and in iPad Portrait mode it will be 768px. My questions is what things I should consider while making Design and writing CSS so writing specific css for Portrait mode should not be needed
I want to make flexible layout for both orientation without using media queries.
You are going to have to use relative width's for everything - think percentages and em's.
Without media queries, it's going to be impossible to serve up different layouts for orientations - however if your design and code is flexible (using relative widths), your design will expand and contract based on the available screen width.
The biggest design concern, in my opinion, would be what the site looks like at 768px wide vs 1024px wide; are the line lengths too long? How will images stretch/contract? Will a font size at 768px be legible at 1024?
The font size will adjust automatically based on the em you set it to, which is a nice thing so you won't have to worry about it.