Ron*_*hot 5 html css iphone ipad ios
我有一个嵌入式HTML文件,我用于我的iOS应用程序中的帮助页面,但是想要在iPad和iPhone上以不同方式显示不同的样式.读过一堆我已经了解了@media语法,除了我的生活,我无法让它正常工作.鉴于下面显示的HTML文件,为什么它总是只显示iPad风格的背景(粉红色)而不是基于设备进行调整？
<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>
将C在CSS代表"级联".您的iPad样式会覆盖您的iPhone样式.尝试像这样切换它们:
/* 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;}
}
iPhone视口有多宽？480像素？
在您的代码中,您首先要检查设备宽度是否<= 480.返回true,因此将应用封闭的样式.然后,您的代码检查设备宽度是否<= 1024.480确实小于1024,因此应用了封闭的样式.
最好不要单独使用该max-device-width属性.将其与其他属性一起使用,min-device-width以准确定位设备.
它有时令人困惑,但为了更好地理解事物,W3C指定的基本属性是device-width设备屏幕的宽度(而不是浏览器宽度)
min并且max是用于表示"大于或等于"和"小于或等于"约束的前缀.此语法用于避免可能与HTML和XML冲突的"<"和">"字符.
换句话说,device-width查询并将设备宽度作为一个数字返回,但使用min和max不会返回表示设备最小和最大宽度的两个固定数字,而是允许您检查是否device-width小于或大于您选择的值.
所以在你的情况下,两套都适用于iPhone,因为订单意味着iPhone的设备宽度总是小于1024和480.
虽然切换你的集合的顺序将作为@JezenThomas的解决方案工作,我建议你尝试这些Hardboiled 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 */
}