Question

我正在重新设计我的网站，以根据屏幕分辨率设置两种布局。对于任何1010px或更高的屏幕，其中一个具有1000px，而对于较小的屏幕，另一个具有675px。现在我正在使用以下视口标记：

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

此设置适用于桌面浏览器和iPad。但是，Android和iPhone浏览器都没有正确显示页面，它们从各种级别的缩放开始。相反，我希望675px显示器正确显示缩放，以便整个宽度显示在屏幕上。我试着用：

<meta name="viewport" content="width=675px, user-scalable=yes">

它改善了iPhone的版本，但迫使iPad显示更小的尺寸，即使它有1024px宽屏幕。不太清楚如何解决这个问题。

网站是http://dendory.net

Answer 1

您是否尝试删除initial-scale = 1.0并将视口设为：

<meta name="viewport" content="width=device-width">

然后使用媒体查询来设计您的断点。

Answer 2

尝试使用mediaqueries。它允许您定位设备以应用某些css属性。您只需将其粘贴到样式表中即可。我用它来创建响应式电子邮件。

以下是一个简单的媒体查询示例：

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

我希望这有帮助！

Answer 3

您应该尝试使用@media个查询。只需将这些应用到样式表中，您就可以根据设备，大小以及您希望使用不同设备实现的目标来获得总变量样式。

e.g。

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
    body {

    }
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
    body {

    }
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
    body {

    }
}

在这些中，您可以根据设备的比例简单地应用不同的样式，如下所示......

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
    body {

    }

    /* COLUMN GRID */
    .g1,.g2,.g3 {display:inline; float: left}

    /* 2 COLUMN GRID */
    .g1 {width:48.0%}
    .g2 {width:48.0%}
    .g3 {width:98.0%}
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
    body {

    }

    /* 3 COLUMN GRID */
    .g1 {width:31.333%}
    .g2 {width:64.667%;}
    .g3 {width:98.0%}
}

如果您想拥有适用于所有设备的完全互动网站，这非常有用。目前，通常的做法是使用媒体查询。

此外，大多数浏览器的媒体查询都非常透明，这使得它们成为一种“良好实践”。 Check this out!

调整站点分辨率到移动设备屏幕大小的问题

3 个答案: