The minimum width media query cannot work on the iPad?

Why did you receive the following media query on the iPad in landscape mode?

@media all and (min-device-width: 1000px) {
css here
}

or

@media all and (min-width: 1000px) {
css here
}

I hope this CSS can be positioned Browsers with more than 1000 pixels, not just ipads. Therefore, if possible, the minimum width of id and the second option is not the minimum device width. Both versions can use firefox normally on my computer.
Thank you

iPad always reports its width as 768 pixels and height as 1024 pixels, so you must Learn how to use direction rotation, and use min-device-height: 1000 pixels like this:

/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}

/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
@media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}

Results:

> iPad

>Portrait – Green Text – Black Background
>Landscape – White Text – Red Background

> iPhone

>Portrait – Green Text – Black Background
> Landscape – Green text – Black background

>Computer (resolution)

> 1680×1050 – White text – Red background
> 800×600 – Green text – Black background

Use Chrome & Firefox (Does anyone even use IE? )

References:
w3 media queries
Safari CSS Reference
Optimizing Web Content

Why is the iPad in landscape mode? Received the following media query on?

@media all and (min-device-width: 1000px) {
css here
}

or

@media all and (min-width: 1000px) {
css here
}

I hope this CSS can be positioned Browsers with more than 1000 pixels, not just ipads. Therefore, if possible, the minimum width of id and the second option is not the minimum device width. Both versions can use firefox normally on my computer.
Thank you

iPad always reports its width as 768 pixels and height as 1024 pixels, so you must understand how to use direction rotation and use min-device- height: 1000 pixels like this:

/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}

/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
@media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}

Result:

> iPad< /p>

Portrait – Green Text – Black Background
>Landscape – White Text – Red Background

> iPhone

>Portrait – Green Text – Black Background
>Landscape – Green Text – Black Background

>Computer (Resolution)

> 1680×1050 – White Text – Red background
> 800×600-green text-black background

Use chrome & firefox (does anyone even use IE? )

Reference:
w3 media queries
Safari CSS Reference
Optimizing Web Content

Leave a Comment

Your email address will not be published.