Html 解释未包含元视口标记时移动浏览器的行为

我有一个宽度设置为800px的

div

。当我在笔记本电脑上查看它时，它会按预期显示。但是当我在手机上访问网页时（或者只是使用chrome开发者工具使用iPhone6视图），我希望div超出屏幕的宽度，因为iPhone6的宽度只有375点（CSS像素）

---

现在我知道，在包含

后，它将按预期工作。确实如此。但我很想知道，当meta标签不存在时，移动浏览器在默认情况下会做什么。它似乎“看到”屏幕的宽度约为980px（即使不是），并相应地缩放所有内容。因此，为了填满手机的整个宽度，我会使用

width:980px

。但是这个数字是从哪里来的呢？无法完全理解。

如果未配置viewport，移动浏览器将显示完整的网站。意味着你将在iPhone6、6s和7的375像素中看到完整的800像素布局。在这种情况下，设备像素比不起作用。您需要缩放手机屏幕才能阅读文本

在元视口功能和“响应式设计”出现之前，你一定错过了互联网的早期。为了把网站放在你的屏幕上，浏览器会尝试缩小，让你鸟瞰网站——有点像站在离桌面屏幕10英尺远的地方

然后，您可以放大和缩小以与网站的不同部分进行交互。不同的浏览器/设备以不同的方式实现这种缩放。有些人试图找到网站最宽的部分，并将其缩小到足够大的范围，而另一些人可能只是假设你的网站适合一定的宽度，然后缩小到合适的范围

---

在当时，980是网站的实际标准宽度，因为它肯定适合大多数人的桌面显示器。因此，你的设备理所当然地会做出这样的假设：“这显然不是一个响应迅速的站点，这意味着它可能是10年前建成的，假装屏幕是980px宽的”

明白了，谢谢你完整详细的回答。哈哈，我当时正在浏览birdeye网站，但在进入web开发之前，我从未想过那里发生了什么。所以，如果我没弄错的话，980px只是人们根据显示器的大小达成一致的一个数字。然后该网站通过“设计宽度/980”因子来衡量一切。你指的是早期的移动互联网吗？我可能错了，但我想不起在马赛克或网景中有过这样的行为。事实上，缩放过去只适用于字体大小；我们今天所知道的所有项目zoom都是一个相当晚的增强。同样值得注意的是，HTML一直都是响应性很强的，直到CSS允许设计师为1024x768显示器指定一个固定的宽度（因为每个人都有一个1024x768显示器，对吗？）@阿尔瓦罗冈萨雷斯——当我说“互联网在你手中的早期”时，我实际上是指你手中的移动设备。虽然HTML本身具有响应性，但几乎每个网站都有一个约980px的容器，并且没有媒体查询。我的观点是，反应设计的理念还不存在（我不认为旧的流体网站的反应）。我有一个旧的Palm Treo和其他iphone之前的设备，它们都使用了缩小技术。其他像黑莓和小屏幕手机这样的手机试图将网站剥离为纯内容。我认为这在一般情况下是正确的，尽管实际的规则集确实会更复杂，因为没有固定宽度的布局也会被缩小，并且（至少在我自己的网站上）主要内容会以大字体显示在框边。我想浏览器会做很多猜测。