为什么我的网站在移动视图上没有响应？答案

【问题标题】：why isn't my website responsive on mobile view?为什么我的网站在移动视图上没有响应？
【发布时间】：2020-03-04 15:45:26
【问题描述】：

我遇到问题的网站是“kayparkmemorials.com”。如果您在笔记本电脑/台式机上查看它，并将网站缩小到最小的可扩展窗口，它似乎可以响应预期的方式运行。出于某种原因，当我在手机上查看该网站时，它会像在平板电脑视图中一样显示视图。

我将移动视图的最大宽度设置为：@media screen and (max-width: 815px)

任何人以前有过类似的问题并有一些提示吗？我应该补充的另一件重要的事情是，在 Dreamweaver 上通过扫描条形码以在我的手机上获得预览来测试站点时，它按预期进行了预览。在那之后我没有对编码进行任何更改，一旦它正式在网络上（1&1 HOSTING），移动设备的响应能力就没有达到应有的水平。

【问题讨论】：

检查手机浏览器的默认缩放，我敢说它不是100%，这就是为什么你会得到意想不到的结果。默认情况下，您的桌面浏览器很可能是 100%（除非您运行的是 IE11，我相信它是 110%）。您可能会发现您需要使用 Javascript 将浏览器分辨率/缩放到 100% 或使用 additional @media 处理实际移动查看。
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

【解决方案1】：

您需要在页面头部添加视口元标记，如果您不这样做，智能手机浏览器的默认行为是缩放您的桌面页面。

你想要的是

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">  
...  
</head>

祝你好运！

【讨论】：