移动版网站总是比屏幕大得多

Question

我试图在手机上打开我最新的网站设计，并在我转到网址时将其与屏幕匹配。但是，它总是打开更大，我必须双击屏幕，将其调整到正确的大小。

我试过了：

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

但没有任何效果。请查看我的网站上的来源和html：

http://directsellers.org/NeverTakeNo4Answer/LetsGo.html

并告诉我需要修复的内容。感谢。

Answer 1

您缺少响应式设计的CSS。您需要使用媒体查询来定位设备宽度，并为移动设备和平板电脑编写CSS。

请点击以下链接了解相关信息。 http://www.zell-weekeat.com/how-to-write-mobile-first-css

Answer 2

我像你一样面对这个问题。 因此，您必须设置html和body宽度，而不是以百分比或像素为单位，而是以vw（视口宽度）设置。例如：

body, html {
 width: 100vw;
 min-width: 100vw;
 max-width: 100vw;

 overflow-x: hidden
 overflow-y: auto
}

我这样做了，而且有效。

Answer 3

你给出固定的宽度。只需给width:100%。所有div和内容。它会自动响应