I've got an embedded HTML file that I'm using for the help pages within my iOS app but want to style some things differently when displayed differently on iPad and iPhone. Having read a bunch I've learned about the @media syntax and all but for the life of me I can't get it to work properly. Given the HTML file shown below, why does it ALWAYS just show the iPad styled background (pink) instead of adjusting based on device?\[code\]<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>\[/code\]
how do I css style differently between iPad and iPhone
- Thread starter play233
- Start date