css - 元视口(viewport)仅适用于手机？-6ren

css - 元视口(viewport)仅适用于手机？

转载作者：技术小花猫更新时间：2023-10-29 11:08:11

有没有办法只为手机设置通用响应元视口(viewport)()？我们有一个没有那个的网站 meta标记，缩小，在 7 英寸和更大的平板电脑上看起来不错，纵向和横向，但在较小的设备上有点太不方便了。

所以为了让它在手机上按照我们想要的方式工作，我必须使用 <meta name="viewport">标记，然后强制执行一些媒体查询以修复较大设备上的问题。

有没有办法设置meta在手机上添加标签，而在更大的设备上只是设备默认缩小 View ？

谢谢!丰富

最佳答案

你是说这个<meta name="viewport"> ？

<meta name="viewport" content="width=device-width, user-scalable=no" />

如果是这样，请尝试在 <head> 中添加以下脚本(取自并改编自 here ):

if(navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)) {
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}

这将检测用户代理是否指示浏览器是移动的，并将根据需要写入元视口(viewport)。

关于css - 元视口(viewport)仅适用于手机？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18134386/