编辑:这是我的新手错误.我正在编辑一个与我正在测试的文件集不同的文件集.真诚地向所有回答我的人道歉.我已经提出了所有答案,因为我至少从你们所有人的媒体查询中学到了更多,但没有人提供答案.建议现在用这张票怎么办？
这是网站上一个繁忙的话题,但我还没有看到这个问题的解决方案.
该viewport标签存在.我正在使用:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
当我在Chrome中调整浏览器窗口的大小时,它工作正常,我可以看到它在到达时捕捉到新的断点,但iPhone Safari仅显示网站的左上角,没有任何查询的迹象.
我用于iPhone肖像的CSS Media查询是:
@media (max-width: 321px) { }
我正在使用Bootstrap和LESS,所以我的媒体查询都在样式的最后.
对不起,我无法就此分享代码.这是一个奇怪的 - 我希望有人能看到我可能会遗漏的东西.
编辑
这是一个在我的iPhone上工作的非常基本的例子.我可以从纵向旋转到横向,并且bg颜色会发生变化 - 所以我正在使用的媒体查询没有任何问题:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
body
{
background: blue;
}
@media (max-width: 321px)
{
body
{
background: red;
}
}
</style>
</head>
<body>
Here is my content...
</body>