Geek asks and answers

How do I css style differently between iPad and iPhone

I have an embedded HTML file that I use for help pages in my iOS application, but I want to style some things differently when they appear differently on iPad and iPhone. After reading a bunch, I learned about @media syntax, and everything except life, I can not get it to work correctly. Given the HTML file shown below, why does it ALWAYS just show an iPad-style background (pink) instead of a device-based setup?

<head>
    <title>Help</title>

<meta name="viewport" content="width=device-width">
    <style type="text/css">
        h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;}

        /* iphone - GREEN */
        @media only screen and (max-device-width : 480px) {
            body {background-color:#009900;}
        }

        /* ipad  - PINK */
        @media only screen and (max-device-width : 1024px) {
            body {background-color:#ff8888;} 
        }
    </style>
</head>
<body>
    <br>
    <h1> I Need Some Help!</h1>
</body>
+5
source share
3 answers

Cin CSSmeans cascading. Your iPad styles overwrite your iPhone styles. Try switching them like this:

/* ipad  - PINK */
@media only screen and (max-device-width : 1024px) {
    body {background-color:#ff8888;} 
}

/* iphone - GREEN */
@media only screen and (max-device-width : 480px) {
    body {background-color:#009900;}
}

How wide is the viewing area of ​​the iPhone? 480px?

, <= 480. true, . , <= 1024. 480 1024, .

+8

max-device-width . , min-device-width, .

, , , W3C, - device-width, ( )

min max " " " ". "<" " > ", HTML XML.

, device-width , min max , , , device-width , .

, iPhone, , iPhone 1024 480.

@JezenThomas, Flash CSS:

/* 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 */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
+6

- :

@media only screen and (min-device-width:481px) and (max-device-width : 1024px) {
        body {background-color:#ff8888;
}
+1
source

More articles:


All Articles