是否只能在横向模式下为iPhone编写css的方法相同? 谢谢媒体查询 - 仅适用于iPhone的Css风景
13
A
回答
15
你可以这样做这
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
这迫使iPhone渲染视口相同的设备宽度。
然后使用这个CSS瞄准风景模式,这是+320px
宽
@media screen and (min-width: 321px){
//styles
}
5
如果我理解正确的话,你想知道媒体查询的目标像iPhone智能手机,只有当它保持水平,尝试这样的事情:
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
26
是的,当然。检查:http://www.w3.org/TR/css3-mediaqueries/#orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
如果你想针对iPhone只有你有添加的分辨率或DPPX密度这些MQ。
1
实际上,如果你使用:
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
则防止用户在任何时间,这可能会导致可用性问题放大。
我会推荐您使用:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在这种情况下,强制将显示在您的网页在它的原始的初始规模,这样您就可以指定你的媒体查询不同的布局尺寸,如当你旋转你的iPhone时,布局将被调整大小:
@media only screen and (min-width: 480px) {
/* landscape mode */
}
@media only screen and (max-width: 479px) {
/* portrait mode */
}
而且用户仍然可以捏住页面进行缩放。
1
相关问题
- 1. CSS媒体查询不适用于iPhone
- 2. Css媒体查询不适用于iPhone
- 3. CSS媒体查询为iPhone
- 4. 3个媒体查询iphone的肖像,风景和ipad肖像
- 5. 媒体查询为iPad(横向)适用于三星Galaxy Tab 2(风景)以及
- 6. 仅适用于nexus 10的媒体查询?
- 7. Safari浏览器iPhone 6风景不服从媒体查询
- 8. 媒体查询 - 风景模式对iPhone太超大
- 9. iPhone 5的CSS媒体查询
- 10. iPhone上的CSS媒体查询
- 11. iPhone上的CSS媒体查询
- 12. CSS3媒体查询不适用于iPod/iPhone上的Safari
- 13. 媒体查询不适用于Safari
- 14. 媒体查询不适用于手机
- 15. 媒体查询不适用于手机
- 16. 媒体查询不适用于Ipad
- 17. 媒体查询不适用于Android 4.2.2
- 18. css媒体查询不适用于动画后的jQuery对象
- 19. 适用于现代移动浏览器的CSS媒体查询
- 20. 特定于媒体查询的平板电脑风景
- 21. iPhone媒体查询
- 22. 媒体查询不适用于iphone宽度320px
- 23. 媒体查询不适用于Android和iPhone
- 24. 媒体查询不适用于iPhone和iPad
- 25. 响应式设计 - 媒体查询不适用于iPhone?
- 26. 网站为iPhone CSS媒体查询
- 27. 基于媒体查询应用CSS类
- 28. css媒体查询检测景观只在移动iPhone上,Android
- 29. 媒体查询CSS
- 30. CSS媒体查询
这包括所有的480+的屏幕分辨率的设备... –