iPad和iPhone的css风格有什么不同_Iphone_Html_Css_Ios_Ipad

iPad和iPhone的css风格有什么不同

iphone html css ios ipad

iPad和iPhone的css风格有什么不同,iphone,html,css,ios,ipad,Iphone,Html,Css,Ios,Ipad,我有一个嵌入的HTML文件，用于iOS应用程序的帮助页面，但当在iPad和iPhone上以不同的方式显示时，我想改变一些东西的样式。在阅读了大量关于@media语法的知识后，除了我的一生之外，我无法让它正常工作。鉴于下面显示的HTML文件，为什么它总是显示iPad样式的背景（粉红色），而不是根据设备进行调整 <head> <title>Help</title> <meta name="viewport" content="width=devic

我有一个嵌入的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>


帮助
h1{文本对齐：居中；字体系列：“Tahoma”，日内瓦，无衬线；字体大小：30px；颜色：#ffdd00；字体大小：粗体；文本阴影：rgba（0,0,0,1）2px 2px；}
/*iphone-绿色*/
@仅介质屏幕和（最大设备宽度：480px）{
正文{背景色：#009900；}
}
/*ipad-粉色*/
@仅介质屏幕和（最大设备宽度：1024px）{
正文{背景色：#ff8888；}
}


我需要帮助！

最好不要单独使用

max device width

属性。将其与其他属性（如

min device width

）一起使用，以准确定位设备

有时会令人困惑，但为了更好地理解，W3C指定的基本属性是

设备宽度

，它是设备屏幕的宽度（而不是浏览器宽度）

min

和

max

是表示“大于或等于”和“小于或等于”约束的前缀。此语法用于避免可能与HTML和XML冲突的“”字符

换句话说，

device width

查询并返回设备宽度作为一个数字，但使用min和max不会返回表示设备最小和最大宽度的两个固定数字，而是允许您检查

device width

是否小于或大于您选择的值

因此，在您的情况下，这两种设置都适用于iPhone，因为订单将意味着iPhone设备宽度将始终小于1024和480

虽然切换集合的顺序可以作为@JezenThomas的解决方案，但我建议您尝试以下硬煮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 */
}

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视口有多宽？480px

在代码中，首先检查设备宽度是否，您可以尝试以下方法：

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

这并不是直接解决问题，而是解决了问题@Moin的媒体查询应该准确地区分iPad和iPhone，其中OP是订单依赖型的，这就是我说“直接”的原因。这不是一个很好的答案，因为它不能解释为什么他的代码不起作用。甚至你的评论也提供了一个更大的线索来解释为什么它不起作用。尽管如此，这还是一个解决方案。我不确定这是一个公平的否决票。我同意@JezenThomas，它没有直接回答这个问题。然而，这是很好的信息，可能会有助于OP，所以我把它投了上去。啊，正如他们所说的duh.：-）这是我问题的最简单答案，所以我想我会把它标记为正确答案，尽管原始答案也适用。希望这是可以接受的协议。