Css 媒体查询不符合我在iPhone上的期望

Css 媒体查询不符合我在iPhone上的期望,css,responsive-design,media-queries,Css,Responsive Design,Media Queries,我对使用媒体查询还相当陌生,我可能遗漏了一些明显的东西,但我已经查看了堆栈溢出,还没有找到解决方案 还要注意的是,我在Chrome浏览器上使用一部旧手机(iPhone4S)来查看我的网站 当我在手机上查看网站时,它与我在浏览器上查看网站时完全相同,并且没有像调整浏览器大小时那样考虑媒体查询 注意第一个图像是它当前的样子,我希望它看起来像第二个图像 我将尝试包含相关代码: <meta name="viewport" content="width=device-width">

我对使用媒体查询还相当陌生,我可能遗漏了一些明显的东西,但我已经查看了堆栈溢出,还没有找到解决方案

还要注意的是,我在Chrome浏览器上使用一部旧手机(iPhone4S)来查看我的网站

当我在手机上查看网站时,它与我在浏览器上查看网站时完全相同,并且没有像调整浏览器大小时那样考虑媒体查询

注意第一个图像是它当前的样子,我希望它看起来像第二个图像

我将尝试包含相关代码:

<meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

}我想是的。这是您需要更改的字体大小。我相信有些移动设备会自动调整你的字体,但这可能是你不想要的。试试这个:

-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;

如果回答了您的问题,请告诉我。

如果“有”。那么,我的iPhone上的视图肯定会与上面显示的第二张图像相似,而不是第一张图像——这意味着背景图像会发生变化,因为您在图像上不清楚。您应该提到,第二张图片实际上是正确的,而不是您当前的移动视图。如果您还没有尝试过,请尝试chrome开发工具,并在移动设备图标下选择一款类似的手机进行尝试。它可以模拟手机上的显示,但并不完美。结果是一样的吗?我试过使用Chrome开发工具,但它们太不准确了。它使用媒体查询模拟网站,但当我实际使用iphone查看网站时;它无法正确显示站点,无法呈现媒体查询您可以显示类似的纵向视图屏幕截图吗?当你给我们一幅风景画,告诉我们你希望它看起来像肖像画中的第二幅图像时,很难看到到底发生了什么。这已经足够了,如果你在手机上使用Safari,情况如何?请检查媒体查询中的所有括号是否已关闭第二个媒体查询必须位于底部
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;