元视口仅适用于手机?

本文介绍了元视口仅适用于手机?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Is there a way to set the general responsive meta viewport () only for phones? We have a website that without that meta tag, zoomed out, looks fine on 7" and larger tablets, portrait and landscape, but it was just a bit too inconvenient on smaller devices.

所以为了让它在手机上按照我们想要的方式工作，我不得不使用 <meta name="viewport"> 标签，然后强制一些媒体查询来修复更大的问题设备.

So to get it working how we wanted on phones, I had to use the <meta name="viewport"> tag, which then forced some media queries to fix things on the larger devices.

有没有办法在手机上设置 meta 标签，而在较大的设备上只是设备默认缩小视图?

Is there a way to set that meta tag on phones, and just device default zoomed out view on larger devices?

谢谢！丰富的

推荐答案

你是说这个吗?

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

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

If so, try the following script added in the <head> (taken and adapted from 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" />');
}

这将检测用户代理是否指示浏览器是移动的，并将根据需要编写该元视口.

This will detect if the user-agent indicates that the browser is mobile, and will write that meta viewport as required.

这篇关于元视口仅适用于手机?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！