响应式设计:视口未正确应用

时间:2014-09-16 17:31:26

标签: html css html5 css3 responsive-design

这是我的网站www.offergrind.com

我完全没有响应但问题是,如果我们在移动设备中查看它,则会显示左上角部分。

是否有任何代码,例如

<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">

如何才能让网站在移动视图中展示?

3 个答案:

答案 0 :(得分:0)

从这开始。最小化,它将使您的网站适合设备,但一切都将缩小。

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

您还应该查看CSS pre-processors,我对您引用的CSS文件数量感到震惊。

答案 1 :(得分:0)

我会完全摆脱视口meta标签。如果您的网站不是为响应而设计的,那只会让事情变得更糟。请参阅此内容以获取更多信息:

<强> Stop using the viewport meta tag (until you know how to use it)

答案 2 :(得分:0)

为您的网站使用以下元标记

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

上面的元标记解释了所有内容:

宽度=&#34;设备宽度&#34;网站的宽度等于设备宽度

initial-scale = 1.0表示网站不会缩放以适合设备屏幕

当我们设置minimum-scale = 1.0,maximum-scale = 1.0和user-scalable = 0意味着用户将无法缩放网页(它将通过将maximum-scale设置为1来关闭缩放缩放,或者使用user-scalable = no。)