解释不包含元视口标签时移动浏览器的行为
Explain the behaviour of mobile browsers when meta viewport tag is not included
我有一个 div，宽度设置为 800px。当我在我的笔记本电脑上查看它时，它按预期显示。但是当我访问 phone 上的网页时，（或者只是使用 chrome 开发人员工具使用 iPhone 6 视图）我希望 div 超出宽度屏幕，因为 iPhone 6 宽度只有 375 点（CSS 像素）。
现在我知道在包含 <meta name="viewport" content="width=device-width,initial-scale=1"> 之后它将按预期工作。确实如此。但我很想知道当元标记不存在时，移动浏览器在默认情况下会做什么。看起来 "sees" 屏幕的宽度大约是。 980px（即使不是）并相应地缩放所有内容。所以要填充 phone 的整个宽度，我会使用 width: 980px。但这个数字从何而来？不太明白。
如果未配置视口，移动浏览器将显示完整的网站。这意味着您将在 iphone 6、6s 和 7 的 375 像素中看到完整的 800 像素布局。在这种情况下，设备像素比率不起作用。您需要缩放手机屏幕才能阅读文字。
在元视口功能和 "responsive design" 出现之前，您一定怀念互联网在您手中的早期时光。为了让网站适合您的屏幕，浏览器会尝试缩小并让您鸟瞰网站 - 有点像站在离桌面屏幕 10 英尺远的地方。
然后您可以放大和缩小以与网站的不同部分进行交互。不同的 browsers/devices 实现这种缩放的方式不同。有些人试图找到您网站的最宽部分并缩小到足以包含它，其他人可能只是假设您的网站适合特定宽度并缩小以适合。
过去，980 是网站事实上的标准宽度，因为它肯定适合大多数人的桌面显示器。所以按理说你的设备正在做假设"this clearly is not a responsive site, meaning it was likely built 10 years ago, pretend like the screen is 980px wide"。
我有一个 div，宽度设置为 800px。当我在我的笔记本电脑上查看它时，它按预期显示。但是当我访问 phone 上的网页时，（或者只是使用 chrome 开发人员工具使用 iPhone 6 视图）我希望 div 超出宽度屏幕，因为 iPhone 6 宽度只有 375 点（CSS 像素）。
现在我知道在包含 <meta name="viewport" content="width=device-width,initial-scale=1"> 之后它将按预期工作。确实如此。但我很想知道当元标记不存在时，移动浏览器在默认情况下会做什么。看起来 "sees" 屏幕的宽度大约是。 980px（即使不是）并相应地缩放所有内容。所以要填充 phone 的整个宽度，我会使用 width: 980px。但这个数字从何而来？不太明白。
如果未配置视口，移动浏览器将显示完整的网站。这意味着您将在 iphone 6、6s 和 7 的 375 像素中看到完整的 800 像素布局。在这种情况下，设备像素比率不起作用。您需要缩放手机屏幕才能阅读文字。
在元视口功能和 "responsive design" 出现之前，您一定怀念互联网在您手中的早期时光。为了让网站适合您的屏幕，浏览器会尝试缩小并让您鸟瞰网站 - 有点像站在离桌面屏幕 10 英尺远的地方。
然后您可以放大和缩小以与网站的不同部分进行交互。不同的 browsers/devices 实现这种缩放的方式不同。有些人试图找到您网站的最宽部分并缩小到足以包含它，其他人可能只是假设您的网站适合特定宽度并缩小以适合。
过去，980 是网站事实上的标准宽度，因为它肯定适合大多数人的桌面显示器。所以按理说你的设备正在做假设"this clearly is not a responsive site, meaning it was likely built 10 years ago, pretend like the screen is 980px wide"。