我创建
this website的初衷是让它成为移动设备.然而,我不得不把这个功能拿出去,暂时只是想拥有它,所以当你在移动设备上访问该网站时,你只会看到你在屏幕上看到的网站.不是移动友好的,因为你想要它但缩小,所以你可以看到整个事情.
我已经放入代码中,使其按照我喜欢的方式运行,但有些事情正在发生,而且无法正常工作.我已经查看了视频端口的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">
这就是网站现在在移动设备上的样子
这就是我希望的样子
你能看到我错过的东西吗？
解决方法
在您的情况下,您不应使用任何建议的元视口标记.如果您离开页面时没有任何元视口标记,您应该在大多数移动浏览器中获得所需的结果.
您可以添加< Meta name =“viewport”content =“width = 980”>告诉浏览器你的内容是980像素,如果是这样的话.你似乎有一个960像素宽的页面,但它可能看起来更好,两侧有一些间距.
I find this to be a nice article to explain the meta viewport tag
And this is another article about using the meta viewport tag for non-responsive pages
您尝试过的元视口标记告诉浏览器一些不同的东西：
<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">
