gpt4 book ai didi

iphone - 如何在 iPad 和 iPhone 之间使用不同的 css 样式

转载 作者:太空狗 更新时间:2023-10-29 15:26:17 25 4
gpt4 key购买 nike

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

最佳答案

CSS 中的C 代表“级联”。您的 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 视口(viewport)有多宽? 480 像素?

在您的代码中,您首先检查设备宽度是否 <=480。这将返回 true,因此应用了封闭的样式。 然后,您的代码检查设备宽度是否 <=1024。 480 确实小于 1024,因此应用了封闭的样式。

关于iphone - 如何在 iPad 和 iPhone 之间使用不同的 css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11531580/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com