【问题标题】:Responsive web design css media queries and Iphone different resolutions响应式网页设计 css 媒体查询和 Iphone 不同的分辨率
【发布时间】:2013-01-22 16:32:59
【问题描述】:

我在我的应用程序上使用媒体查询,它似乎运行良好并且在http://www.responsinator.com/ 中显示良好,但是当我在真正的 iPhone 4 中查看时,我的网页根本不可读。看起来都放大了。

试图找出真正的原因,似乎响应者显示 iPhone 4 的分辨率为 320 x 480,而这个网站http://www.iphoneresolution.com/ 显示为 640×960。我的 iPhone 看起来是 640×960。在 CSS 媒体查询中我应该如何处理这些情况?

【问题讨论】:

  • @kleinfreund:我没有这样的东西。我应该添加吗?
  • iPhone 的屏幕分辨率为 320x480,分辨率为 163 ppi,iPhone 2 和 3 也是如此。iPhone 4 的分辨率为 640 × 960,分辨率为 326 ppi,iPhone 5 的分辨率为 1,136 × 640,分辨率为 326 ppi。
  • @Jack 是的,请尝试一下。
  • @kleinfreund:谢谢!这有帮助。
  • 请注意,虽然 iphone 4 的分辨率是 640 x 960,但 iphone 上网站的默认分辨率是 320 x 480

标签: html css responsive-design


【解决方案1】:

将视口元标记添加到您的 html 文件的 head 区域:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

此代码可让您的网站正常扩展。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-05
    • 2012-07-06
    • 2013-04-10
    • 2016-08-04
    • 2013-08-27
    • 1970-01-01
    • 2011-12-26
    相关资源
    最近更新 更多