BB *_*ony 7 iphone mobile-safari css3 responsive-design
编辑:这是我的新手错误.我正在编辑一个与我正在测试的文件集不同的文件集.真诚地向所有回答我的人道歉.我已经提出了所有答案,因为我至少从你们所有人的媒体查询中学到了更多,但没有人提供答案.建议现在用这张票怎么办？
这是网站上一个繁忙的话题,但我还没有看到这个问题的解决方案.
该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>
小智 10
编辑
为我解决的问题是双("或" - 操作的)媒体查询,用于max-device-width或max-width.这就像DavidRönnqvist的第一个建议,但它只是把max-width, max-device-widthBOTH放在媒体查询中,对我有用.
@media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
BBTony,我希望这适合你.
我保留下面的内容,因为它比我在其他地方找到的问题更全面.我不喜欢我的第一个解决方案(在线下),以至于我重新研究了第一千次 - 感谢这篇帖子给了我上面的解决方案而没有荒谬!重要的事情.
编辑:这也有效,但它非常不优雅:在媒体查询条件CSS的每一行上放置"!important".
我不愿意提出这个问题作为答案,但是经过3天的研究,这是第一件对我有用的事情.
问题的完整描述:我有类似BBTony的症状.我有视口标签(我把它放在样式表上面,如推荐的那样).
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
我的媒体查询,旨在捕捉任何小型设备,被运行iOS 5.1的iPhone 3gs忽略,但同样的媒体查询正在运行iOS 6的iPhone 4s正确选择.
@media only screen and (max-device-width:640px) {
/* many styles here */
}
很奇怪的是,当媒体查询中的大多数声明都由旧款iPhone忽略了,他们中的一些是被尊重.然而,较新的iPhone 4s正如预期的那样尊重媒体查询中的所有CSS.在Safari桌面上,媒体查询都完美地工作,在两个断点处都有捕捉(有2个).
我通过几个不同的短语来点击我的CSS,在这里读到CSS错误可能导致移动浏览器忽略媒体查询.在确定我的CSS是合规的,并且仅仅为了它的地狱之后,我在媒体查询中的每一行CSS之后放置了!重要的声明 - 比如80-100!importants.
普雷斯托.
我不能告诉你这是多么的疯狂,这甚至有效,我很好奇为什么旧的iphone只会尊重有条件的!在这种情况下很重要.
我之前在我的网站上使用过它，它对我来说是 iPhone 特定的媒体查询
@media only screen
and (max-device-width: 480px)
and (orientation:landscape) {
/* iPhone landscape */
}
@media only screen
and (max-device-width: 480px)
and (orientation:portrait) {
/* iPhone portrait */
}
像这样的其他问题的答案似乎表明，480pxformax-device-width是您应该在媒体查询中寻找的内容。