I have two different media queries, for iPhone and browser. But the iPhone don't work. The sequence is first browser and then iPhone in the style sheet. When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone. What to do??
I saw this: iphone-6-and-6-plus-media-queries, But what i want is not there.
Browser:
#media only screen and (max-width: 640px) {
#my_div li a img { height: 51% !important; top: 19% !important;}
}
#media only screen and (max-width: 360px) {
.....
}
#media only screen and (max-width: 320px) {
.....
}
iPhone:
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
#my_div li a img { height: 31% !important; top: 14% !important;}
}
If you want to target Iphone 6 use;
#media only screen and (min-device-width : 375px) and (max-device-width : 667px)
add orientation only;
and (orientation : landscape) OR and (orientation : portrait)
For Iphone 6 plus use;
#media only screen and (min-device-width : 414px) and (max-device-width : 736px)
I think at your case -webkit-device-pixel-ratio is the reason of it not working.
where is the code for the iphone in the your css? because if it is above the code for the browser your browser code will write over it. if this is the case then you only need to turn it around.
Related
I'm trying to detect the above device and size web content accordingly.
The below query works for every iPad Pro device apart from 12.9 inch 3rd generation. Does anyone know the correct parameters for width / height?
/* iPad pro */
#media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
{
}
I have now tried the code below as suggested. It still does not work on iPad Pro 12.9 3rd generation only. Screenshot of iPad simulator attached. The login section should fill the width of the screen
/* Landscape*/
#media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)
{
div.information
{
width:1290px;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
border-radius: 20px;
margin-bottom:10px;
}
}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)
{
div.information
{
width:950px;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
border-radius: 20px;
margin-bottom:10px;
}
}
The following query below should work for you. I added an orientation question to the statement to specify which way you're holding the iPad. Also, instead of using 2 width values, you need to replace the max value with a height value instead (which will change depending on if you're holding the device in a landscape or portrait manner.
/* Landscape*/
#media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
#media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
What are the CSS media queries corresponding to Apple's new devices ? I need to set the body's background-color to change the X's safe area background color.
iPhone X
#media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 8
#media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone 8 Plus
#media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.
Looking for a specific orientation ?
Portrait
Add the following rule:
and (orientation : portrait)
Landscape
Add the following rule:
and (orientation : landscape)
References:
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://mydevice.io/devices/
http://viewportsizes.com/mine/
Here are some of the following media queries for iPhones. Here is the ref link https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
/* iphone 3 */
#media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
#media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s, 7, 8 */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X , XS, 11 Pro, 12 Mini */
#media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone 12, 12 Pro */
#media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone XR, 11 */
#media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone XS Max, 11 Pro Max */
#media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone 12 Pro Max */
#media only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3) { }
I noticed that the answers here are using: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.
Please refrain from using them since they are deprecated. see MDN for reference. Instead use the regular min-width, max-width and so on. For extra assurance, you can set the min and max to the same px amount.
For example:
iPhone X
#media only screen
and (width : 375px)
and (height : 812px)
and (orientation : portrait)
and (-webkit-device-pixel-ratio : 3) { }
Here are a few useful links on this subject:
https://medium.com/#hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
https://ivomynttinen.com/blog/ios-design-guidelines
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env()...
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
Here's a link describing this:
https://css-tricks.com/the-notch-and-css/
If your page is missing meta[#name="viewport"] element within its DOM, then the following could be used to detect a mobile device:
#media only screen and (width: 980px), (hover: none) { … }
If you want to avoid false-positives with desktops that just magically have their viewport set to 980px like all the mobile browsers do, then a device-width test could also be added into the mix:
#media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }
Per the list at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, the new hover property would appear to be the final new way to detect that you've got yourself a mobile device that doesn't really do proper hover; it's only been introduced in 2018 with Firefox 64 (2018), although it's been supported since 2016 with Android Chrome 50 (2016), or even since 2014 with Chrome 38 (2014):
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/hover
i want the green and red box to be smallere at mobile (iPhone): http://shop.cykel-expressen.dk/booking/
I thought this was the code, but it is not working, but isn't working)):
#media all and (min-width:321px) and (max-width: 480px) .dopsp-body { .dopsp-body height: 50xp }
You are missing { after the (max-width: 480px)
#media all and (min-width:321px) and (max-width: 480px) {
.dopsp-body { height: 50px }
}
You can use media query for this.
#media screen and (max-width: 480px){
//Reduce the size of green and red box here
}
You are using wrong method, try to this.
#media only screen and (max-width: 479px) {.dopsp-body {height: 50px }}
try first is for portrait second for landscape code is on http://stephen.io/mediaqueries/ has plenty of good snippets
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
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
My question is that media queries is working fine in all the devices but the problem is coming in samsung glaxay tab10.1 while it is working fine in ipad etc please check my media queries
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
This is because the Samsung Galaxy Tab 10.1 resolution is 800x1280 and you're looking for devices between 768x1024 so this wont work
ideally you should do mobile first and something similar to these media queries
#media screen (min-width: 480px) {
//css goes here
}
#media screen (min-width: 768px) {
//css goes here
}
#media screen (min-width: 1024px) {
//css goes here
}