4

我正在重新设计我的网站，使其具有基于屏幕分辨率的两种布局。一个有 1000px 用于任何 1010px 或更大的屏幕，另一个有 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 显示更小的尺寸，即使它有 1024 像素宽的屏幕。不太清楚如何解决这个问题。

顺便说一句，该网站是http://dendory.net

4

3 回答 3

0

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

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

然后在设计中为您的断点使用媒体查询。

于 2013-04-18T15:03:05.540 回答
-1

Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.

Here is an example of a simple mediaquery:

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

I hope this helps !

于 2013-02-25T23:12:51.307 回答
-1

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

例如

/* 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%}
}

如果您想为所有设备创建一个完全交互式的网站，这将非常有用。如今，使用媒体查询是一种常见的做法。

此外，媒体查询在大多数浏览器中都是非常透明的，这使得它们成为使用的“好习惯”。看一下这个！

于 2013-02-25T23:46:44.873 回答