I'm using the iOS Simulator to test my responsive theme's media queries for the various iOS devices but the below media queries aren't rendering. I've referenced w3.org media queries standards plus this blog post, A Pixel Identity Crisis from A List Apart, and Mozilla's blog post amongst a few others, but am not seeing what's breaking the queries, do you?
/*-- iPhone 4, 4S Retina -----------------------*/
#media
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px),
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) {
/*styles here */
}
/*------- iPhone 2G, 3G, 3GS -------------*/
#media
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px),
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) {
/*styles here*/
}
If you are only targeting ios (you don't have to worry about opera/firefox) then you can safely shorten your media queries to something like:
/*-- iPhone 4, 4S Retina -----------------------*/
#media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) {
/*styles here */
}
/*------- iPhone 2G, 3G, 3GS -------------*/
#media screen and (min-width: 320px) and (max-width: 600px){
/*styles here*/
}
It might also be a good idea to have (orientation: landscape) / (orientation: portrait) ones in there too if your site needs them.
Related
I am doing updates to my personal website and giving it a completely new layout. I have been working with SASS and converting it to CSS. I want my site to display on any device that the user might be using (i.e laptop, iPad, mobile phone). Currently, I have been writing my SASS/CSS using media queries to target each different device. As there are so many different to deceives, I was wondering if there is an easier way to write style for each device without having to target them individually?
#media screen and (width: 375px) and (orientation: portrait) {
button,
#submit,
a.button {
font-size: 18px;
width: 200px;
height: 50px;
}
}
#media screen and (max-width: 414px) and (orientation: portrait) {
button,
#submit,
a.button {
font-size: 18px;
width: 200px;
height: 50px;
}
}
These media quires might help you
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// 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) { ... }
A good approach to writing CSS is to use the mobile first principle. It means you start off from the smallest screen and work your way up. This means that your cascade (the C part of CSS) works to it's fullest potential. After you have small, medium and large looking good, start to work on the "weirder" sizes.
For example, mobile landscape size:
#media only screen and (min-device-width: 320px) and (max-device-width: 812px) and (orientation: landscape) {
code goes here
}
This should make everything more manageable.
Here is my media queries that support major multiple devices.
Supported Devices: Moto G4, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPad Pro, Surface Duo, Galaxy Duo
`#media only screen and (max-width: 280px){
}
#media only screen and (min-width: 281px) and (max-width: 320px){
}
#media only screen and (min-width: 321px) and (max-width: 360px){
}
#media only screen and (min-width: 361px) and (max-width: 500px){
}
#media only screen and (min-width: 501px) and (max-width: 800px){
}
#media only screen and (min-width: 801px) {
}`
I have the following media screens:
/*
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape){}
/*
1024px - 768px
XGA - (Ipad)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape){}
/*
1366px - 768px
WXGA - (Ultrabook)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape){}
However, there are three (3) rearrangements that have the same pixel,
So he is entering the first 768px without being able to modify it for others.
I would like to know how I do to fix this, since I have (3) resolutions that are as follows:
768x1280
1024x768
1366x768
I assume you don't just want to use this for just few lines of code, but rather for a medium sized/big project.
Your approach is too robust and hard coded. You don't necessary need to be this specific for every device and screen size. This would mean a lot of repeated code.
On your design implementation, focus on the combination between relative + and fixed sizes for elements. (check some well coded responsive template examples)
Then, use #media queries to watch general screen sizes and apply specific changes for these.
A example would be:
/*
768px - 1024px
XGA - (Ipad)
AND
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-width: 768px)
and (max-width: 1280px) {
}
/*
WXGA - (Ultrabook)
768px - 1366px
*/
#media only screen
and (min-width: 1281px)
and (max-width: 1680px) {
}
NOTE: I have replaced device-width(deprecated and often unnecessary) with width.
If you want to check a comparison between them: https://www.sitepoint.com/media-queries-width-vs-device-width/
From Large Desktop Screen to Small Mobile Device: which are the Media Queries we should use?
I am bit confused with this. I am trying to get this clearly
/*Small Desktop*/
#media (max-width:1920px){
}
#media queries apply standard CSS only where the device's screen meets certain defined criteria (height, width, and pixel-ratio; mainly)
The best resource I've found for media queries is https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here's a snippet of the fantastic work there:
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
In the code example below there are two cubes with styles for desktop and mobile.
on the iphone for example the cube should be green whereas on desktop it should be (and is) red.
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green.
Same on the iPad.
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something.
What am I doing wrong?
/* for desktop */
#media only screen and (min-width: 400px) and (max-width: 767px) {
#block2 {width:100px;height:100px;background:red;}
}
/* for iPhone */
#media only screen and (min-device-width:320px) and (max-device-width: 767) {
#block2 {width:100px;height:100px;background:green;}
}
/* for desktop */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
#block {width:100px;height:100px;background:red;}
}
/* for iPad */
#media only screen and (min-device-width:768px) and (max-device-width: 1024) {
#block {width:100px;height:100px;background:green;}
}
<div id="block"></div>
<div id="block2"></div>
There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)
to
(max-device-width: 767px)
(max-device-width: 1024px)
Try something like this.
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and
(min-device-width: 320px) and (max-device-width: 568px) and
(-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
For more details - CSS-Tricks
I am using the following media queries as these happened to be the breakpoints:
#media only screen and (max-width: 1022px)
#media only screen and (max-width: 900px)
#media only screen and (max-width: 816px)
#media only screen and (max-width: 766px)
#media only screen and (max-width: 750px)
#media only screen and (max-width: 700px)
#media only screen and (max-width: 668px)
however on an ipad or smartphone (Phone resolution max width of 668px) it still displays the generic css but on a browser resize to the device resolution it shows correctly - Do I have to create device specific queries?
An iPad has a 1024x768px resolution, so naturally will not be targetted by any of those queries. Instead of using max-width, you should use max-device-width:
#media only screen and (max-device-width: 1022px)
#media only screen and (max-device-width: 900px)
#media only screen and (max-device-width: 816px)
#media only screen and (max-device-width: 766px)
#media only screen and (max-device-width: 750px)
#media only screen and (max-device-width: 700px)
#media only screen and (max-device-width: 668px)
Please use the viewport inside of head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
On mobile devices the viewport size is a bit more complicated then on desktop screens. By default they basically display the site in the "virtual viewport" that varies between 800-1000px in different browsers, and then scale it to fit the physical screen. See the classic article by Peter-Paul Koch: http://quirksmode.org/mobile/viewports2.html
Add like this it will work:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
For reference:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media only screen and (max-width: 668px) and (min-width:xxxpx)
need set min-width also.