为什么我的网站会在移动设备上切断？

Question

我创建这个网站的初衷是让它成为移动设备.然而,我不得不把这个功能拿出去,暂时只是想拥有它,所以当你在移动设备上访问该网站时,你只能看到你在屏幕上看到的网站.不像你想要的那样移动友好,但缩小了,所以你可以看到整个事情.

我已经放入代码中,使其按照我喜欢的方式运行,但事情正在发生,而且无法正常工作.我已经查看了视频端口的HTML 5垫片和其他选项,但我无法弄明白.

我尝试了一些视口标记的不同变体

<meta name="viewport" content="width=device-width" /> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 
<meta name="viewport" content="width=500, initial-scale=1">

这就是网站现在在移动设备上的样子

这就是我希望它看起来像

你能看到我错过的东西吗？

Answer 1

在您的情况下,您不应使用任何建议的元视口标记.如果您离开页面时没有任何元视口标记,则应在大多数移动浏览器中获得所需的结果.

你可以添加<meta name="viewport" content="width=980">告诉浏览器你的内容是980像素,如果是这样的话.你似乎有一个960像素宽的页面,但它可能看起来更好,两侧有一些间距.

我发现这是一篇很好的文章来解释元视口标记

这是另一篇关于对非响应式页面使用元视口标记的文章

您尝试过的元视口标记告诉浏览器一些不同的东西:

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

这告诉浏览器内容宽度应该适合设备宽度.为了成功使用此功能,您的页面宽度应该可以调整到设备.

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

这告诉浏览器它应该缩放页面,使得页面中的1个CSS像素等于屏幕上的1个视口像素(而不是例如Retina显示器上的物理像素).这会导致您的页面被放大,因为它比普通的移动屏幕更宽.Maximum-scale也告诉浏览器不要让你进一步缩放页面.

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

这告诉浏览器内容宽度为500像素,您应该缩放页面.