添加<META NAME =“视口”>与移动检测

截至晚了，我已经看到了一些网站，具有相当于在JavaScript /服务器端代码如下声明：添加<META NAME =“视口”>与移动检测

if user is on a mobile device 
    print '<meta name="viewport" content="scaling stuff">'

是仅在移动设备上添加标签有什么优势？它似乎不太可靠，因为它基于用户代理，但我有兴趣听到双方。

来源

2017-06-17 Connor Gurney

可能是一个有用的[阅读]（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag） – aug

谢谢，@aug。我知道标签的作用，我的问题只是关于它被有条件添加。 –

我会建议在每个响应式网站上使用<meta name="viewport" content="width=device-width">或<meta name="viewport" content="width=device-width, initial-scale=1">。它不需要有条件添加，因为它对桌面设备没有影响。

它是做什么的？

一个视口元素为浏览器指示如何控制页面的尺寸和缩放。

width = device-width部分设置页面的宽度以跟随设备的屏幕宽度（根据设备的不同而不同）。

（可选）initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。这将防止用户放大，这就是为什么我倾向于不使用该部分，但可能在移动应用程序中得心应手。

如果您不使用元视口标记会发生什么？

移动设备将假定该网站的宽度为980像素，并尝试缩放网站以使其适合屏幕。它还会尝试调整文本的大小以使其更具可读性。这可能在没有响应的网站上很方便，但是对于网站的响应，您希望完全控制移动设备呈现移动设备的方式。

来源

2017-06-17 11:06:40 WizardCoder

我理解标签的使用并自己使用它，我只是更加好奇，有条件地添加它的原因。 –

如果您想要平板电脑来调整网站的桌面版本大小，而不是显示响应版本，那么您可以这样做的唯一原因是。不过，我个人认为这不是一个好主意，除非没有考虑到网站在平板电脑上的显示方式，而您只需要快速修复即可在平板电脑上工作。如果只在所有移动设备上显示视口，那么这将是毫无意义的，因为视口元对桌面没有任何影响。 – WizardCoder

这似乎很奇怪，因为用户代理检查包括主要的两个平板平台iOS和Android，所以我很不确定。我可能会直接与网站的开发人员联系，因为这似乎是我得到答案的唯一方法。 –

添加<META NAME =“视口”>与移动检测

回答

相关问题