android - 一些手机不承认媒体查询

Question

我正在处理媒体查询，我的问题是手机主要是安卓手机。
网址是:http://home.comcast.net/~shadowpeopleorg/mobilestorytest.html

正常工作时，网页的横幅应位于顶部，以黑色背景上的金色字母居中，背景应为羊皮纸米色。

查询在“纵向”和“横向” View 中与 ipod touch 完美配合，但在“纵向”旋转中不适用于 safari 浏览器手机。

查询样式表在基于 android 的手机中纵向或横向均不被识别。我无法确定问题出在哪里，但我认为它与 header 中的元视点声明有关。

我非常感谢那些使用手机检查测试页面并报告样式表属性是否同时显示在纵向和横向 View 中的人。

我试过:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media="only screen and (max-width: 480px)" type = "text/css"href="mobilestory.css" />
<link rel="stylesheet" media="only screen and (min-width: 481px)" type = "text/css" href="aaastory.css" />

还有:

<link rel="stylesheet" media="only screen and (max-width: 480px) and (orientation : landscape)" type = "text/css"href="mobilestory.css" />

和:

link rel="stylesheet" media="only screen and (max-width: 480px) and (orientation : portrait)" type = "text/css"href="mobilestory.css" />

我还将元标记更改为:

<meta name="viewport" content="initial-scale=1">

Answer 1

这里的重点是你的 css 完全扭曲了

@media screen an

d (min-width: 481px)
h1 {
border: none;
margin-right: 120px;
font-family: Times New Roman;
line-height: normal;
color: grey;
text-align: right;
text-decoration: none;
font-size: 100%;
font-weight: normal;

代替 margin-right: 120px; 做 text-align: center; 并使用百分比作为边距和所有...尝试一些响应式设计。它适用于所有手机、平板电脑或个人电脑。

金色既不会出现在 chrome 中也不会出现在 android 选项卡中。如果有问题，请帮助我解决这个问题。

请看这张在 samsung note 2 横向模式下可重现的图像？我希望这是你想要修复的部分？