body{
max-width:1366px;
margin:0 auto;
}
My website is 1366px max width.
My phone (two years old) is 1920 x 1080.
Phones of my friends are simmilar - 960px width and higher.
I cannot find any phone on my environment with smaller resolution.
On the other side, Google has its Chrome module for responsive checking (console and click on mobile icon) with widths like 360 - 375 - 412 - 414 - 768px.
Simmilar sitation is on many web sites for that purpose - for example - https://www.responsinator.com/
My dillemma is - do I need to change any on my website?
It suits very fine on 960px without any intervention.
Could I just ignore the Google's widths smaller then 960px?
Is there any real possibility that in today's world someone has a phone with 360 px width?
Any suggestion?
If you want to support maximum device compatibility you can try following media query
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
It really depends on your target. Check out this page for one set of data on screen resolutions out in the wild. Also understand that you and your friends are probably a bit of a skewed sample when it comes to mobile devices, and a flagship or even mid-range device from 2 years ago is still way ahead of low end devices being sold today.
Related
My website works on all mobile devices and desktops up to 5120px in width, I used media queries for portrait and landscape versions on my phone and the landscape worked perfectly for laptops and PCs alongside "min-width". However now that I'm dealing with an ultra wide monitor the bottom of my container gets cut off by the bottom of the screen. The media queries I have used so far go like this:
#media (min-width: 540px) and (orientation:landscape)
#media (min-width: 540px) and (orientation:portrait)
I used the width of the device in either landscape or portrait alongside its orientation and was happy with the results despite the effort, now Im stuck wondering what to use for most ultrawide devices to work?
I have almost all queries for every phone. (I think atleast)
Example Iphone 6/7/8 (375x667), but uses:
#media only screen and (max-device-width: 640px) and (min-device-width: 360px){
#sidebar {
min-width: 360px;
max-width: 360px;
margin-right: -360px !important;
}
}
My full sidebar responsive media queries:
https://jsfiddle.net/aw5ty84a/6/
Cant add all queries here.
But the problem is the phone uses too small phone resolution or iPhone 5 uses too big resolution queries.
The queries are set by min & max pixel width so the iPhone 6 for example will only pick up the first media query relevant in the code, while ignoring any after (ignoring the correct one).
There may be a way with JS to target by specific device but you can't do so with CSS since the media queries are simply based on min/max pixel width.
You would need to change your width from exact pixels to something like percentages and use a more broad based pixel range like mentioned above.
Ideally you don't want to have a single media query for each phone size. The smallest screen size existent is 320px, so that's the smallest you want.
I like to have around 4 - 6 sizes of media queries, like XL, L, M, S and XS. XL could have max-width 1200px, L max-width 940px, and so on. This will improve your organization and code readability. Each project is different though - sometimes you may not need the XL, but may need a XXS, for instance.
Take the Bootstrap approach to media queries breakpoints as an example. Note that these values are what Bootstrap uses, you can come up with yours to what is most appropriate for your project;
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
If there is a very specific scenario where you find a bug at a specific breakpoint you can add that media query, but if you're coding clean this usually will not happen.
Good luck!
Currently bootstrap has breakpoints for their gird system / different size screens set by size in pixels:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
However, with phones now being super high resolution and sometimes having 1080p screens, it displays the tablet or desktop layouts on some phones which is still a bit useless. Is there someway to manage this by looking at pixel density or similar?
You might look into setting Em's instead of pixel based breakpoints since ems are based on the font size, zoom and several other factors to enable the break point.
Well, ultimately, if you’re using pixels it will literally be that strict. For example, say we have a media query that is like so;
#media (max-width: 500px) {
rules here...
}
It will force that 500px as the breakpoint, regardless of the base font size or zoom level. You can imagine how this might be a problem if, for example, your user zooms to a factor of 10, the width of the browser is still going to be the determining factor as a breakpoint, so it might completely ruin your beautifully designed website.
I'm using Twitter Bootstrap to responsive website and I don't understand the difference between
#media screen and (min-width: 768px)
#media (min-width: 768px)
"Screen" or not? any help?
http://www.w3.org/TR/CSS21/media.html#at-media-rule
#media screen is computer screen, so
The first rule is for computer screens only with resolution width at least 768px.
The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.
screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.
The browser identifies itself as being in the “screen” category.
Specification
applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc
So it will work for color computer screens at differing resolutions e.g.
Mobile
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)
Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots.
I posted actual cleaned template code on JSFIDDLE.
Now when width is more then 1200px columns are ok that mean they are two span6 side by side:
Between 1200px and 980px display should looks like:
Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center:
Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center:
The smallest width corresponds to my expectations.
I am not sure if I understand your question correct, but you can customise the behavior by using media queries
// Landscape phones and down
#media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
#media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
#media (min-width: 1200px) { ... }
Maybe you have to overwrite some classes and ids. The responsive information can be found on git:
responsive.less
responsive-1200px-min.less
responsive-767px-max.less
responsive-768px-979px.less
responsive-navbar.less
responsive-utilities.less
Nevertheless play with these Settings only if you really have to.