0

我对流畅的布局、屏幕分辨率以及 twitter 引导程序本身的工作方式有点困惑。

我在网站嘲笑的早期阶段。

所以到目前为止我所做的在桌面上看起来相当不错。

在此处输入图像描述

当我在 chrome 中调整窗口的大小时,布局也适应得很好(尽管并不完美)。

在此处输入图像描述

令我困惑的是,当我从 iPhone 广告 iPod touch 浏览时,它只是渲染了大桌面渲染的半损坏版本:

在此处输入图像描述

我知道您可以使用媒体查询来单独影响这些特定屏幕的 CSS,如下所示:

/* Large desktop */
@media (min-width: 1200px){

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 480px) {

}

但是,当我在桌面上手动减小窗口大小时,iPhone 不应该向我显示相同的内容吗?

您可以在此处查看该站点的实时版本。

4

1 回答 1

2

您还需要为移动浏览器定义初始视口大小:

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

在http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html阅读更多内容

于 2013-03-26T21:13:01.073 回答