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

概述我创建 this website的初衷是让它成为移动设备.然而,我不得不把这个功能拿出去,暂时只是想拥有它,所以当你在移动设备上访问该网站时,你只会看到你在屏幕上看到的网站.不是移动友好的,因为你想要它但缩小,所以你可以看到整个事情. 我已经放入代码中,使其按照我喜欢的方式运行,但有些事情正在发生,而且无法正常工作.我已经查看了视频端口的HTML 5垫片和其他选项,但我无法弄明白. 我尝试了一些视 我创建 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">

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

总结

以上是内存溢出为你收集整理的html – 为什么我的网站会在移动设备上切断？全部内容，希望文章能够帮你解决html – 为什么我的网站会在移动设备上切断？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。