Question

我创建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">

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

enter image description here

这就是我希望它看起来像

like this screenshot

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

Answer 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像素，您应该缩放页面。

Answer 2

我没有在你的主题style.css文件中找到移动设备的CSS。请为各种设备写一些CSS，如android，iphone，ipad，tablet pc等。

示例：

* @media Rule */
@media all and (max-width: 1024px) {here is your css code}

@media all and (min-width: 800px) and (max-width: 1024px) {here is your css code}

@media all and (min-width: 320px) and (max-width: 780px) {here is your css code}

我认为它可以帮助您正确理解响应式CSS设计。

由于

Answer 3

如果您希望它缩小，请删除视口限制。它限制了您的视野，并防止它正确调整您的网站大小。

如果您根据屏幕分辨率重新定位内容，则应该只使用移动视口，例如前面的响应式设计示例。

Answer 4

我认为您希望手机中的网站外观与您在桌面中的外观相同。因为我可以看到你提供的screeshot。为此，删除您在标题中放置的视口代码。还要确定某些标签是否未正确关闭。这可能是问题的原因。

Answer 5

每次只尝试其中一个Meta视口，删除其他视频。

首先尝试：<meta name="viewport" content="width=device-width" />

Answer 6

将此添加到您的正文标记中：

body {min-width: 1024px;}

不应该用这个影响您的元或媒体查询，但是提到的这个元素很棒：

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

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

6 个答案: