媒体查询在某些手机中未得到确认

Question

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

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

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

查询样式表未在基于Android的手机中以纵向或横向方式确认。我无法确定问题是什么，但我认为它与标题中的元视点声明有关。

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

我试过了：

<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标签中。如果有问题，请帮我解决。

请看三星音符2风景模式中可再现的图像？我希望这是你想修复的部分吗？