Question

我使用下面的东西但没有工作，我的页面宽度是1170px，它不适合移动设备。我在这个网站上有新人可以帮助我吗？提前谢谢。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes" />
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width" />

<meta name="viewport" content=", initial-scale=0.5" />

<meta name="viewport" content="width=480, user-scalable = yes, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
<meta name = "viewport" content = "width = device-width, initial-scale = 0.33, user-scalable = yes"></meta>
<meta name = "viewport" content = "width = 980px, initial-scale=0.4, maximum-scale=1" />
<meta name="viewport" content="width=320, maximum-scale=1, minimum-scale=1, initial-scale=0">

Answer 1

我建议使用以下内容。

在头下：

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

在样式表下：

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Your Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Your Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Your Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Your Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Your Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Your Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Your Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Your Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Your Styles */

将所有标签，ID，类，选择器等放在上面的@media中，您将获得适合多个设备平台的所有内容。

希望这有帮助。

Viewport无法使用1170px的页面宽度用于移动设备，如何修复？

1 个答案: