我如何在iPad和iPhone之间以不同方式呈现风格 [英] how do I css style differently between iPad and iPhone
问题描述
我有一个嵌入的HTML文件，用于在我的iOS应用程序中的帮助页面，但希望以不同的方式在iPad和iPhone上显示时以不同方式设置一些样式。阅读了一大堆，我了解了@media语法，但除了我的生活，我无法正常工作。鉴于下面显示的HTML文件，为什么它总是只显示iPad风格的背景（粉红色）而不是基于设备进行调整？
< HEAD>
< title>帮助< / title>
< meta name =viewportcontent =width = device-width>
< style type =text / css>
h1 {text-align：center; font-family：Tahoma，日内瓦，无衬线字体;字体大小：30像素;颜色：＃ffdd00;字型重量：粗体; text-shadow：rgba（0，0，1）2px 2px;}
/ * iphone - GREEN * /
@media仅限屏幕和（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>我需要一些帮助！< / h1>
< / body>
C 在 CSS 中代表'cascading'。您的iPad样式正在覆盖您的iPhone样式。尝试像这样切换它们：
pre $ PINC * /
@media仅屏幕和（max-设备宽度：1024px）{
body {background-color：＃ff8888;}
}
$ b $ * / iphone - 绿色* /
@media仅屏幕和（max-device-width：480px）{
body {background-color：＃009900;}
}
iPhone视口有多宽？ 480px？
在您的代码中，您首先检查设备宽度是否小于等于480。这将返回true，所以应用了封闭的样式。 然后，您的代码检查设备宽度是否<= 1024。 480确实小于1024，所以应用了封闭的样式。
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?
<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>
The C in CSS stands for 'cascading'. Your iPad styles are overwriting your iPhone styles. Try switching them around 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 iPhone viewport? 480px?
In your code, you're first checking if the device width is <=480. This returns true, so the enclosed styles are applied. Then, your code checks if the device width is <=1024. 480 is indeed less than 1024, so the enclosed styles are applied.
这篇关于我如何在iPad和iPhone之间以不同方式呈现风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
