通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）

JS动态添加meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信进入）

5月28晚上周四下班接了一个急活，一个面向国外的国际官方网站，三方适配+兼容。说是月底上线，mama呀，加上周六日也只有3天时间，这不是明摆着让我加班到天亮么。开发进度相对顺利，星期天测试同学在家测试也相对顺利，因为手机有限，也一直没测试出什么bug，周一到公司借用了一些同事的手机，发现从微信里面打开，钉钉打开，oppe和华为部分手机打开都不能适配手机屏幕。解决办法想到了使用动态加载meta标签，根据分辨率动态设置缩放比例。完美搞定~

var phoneWidth =  parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua) || /ios (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); }
} else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）相关推荐

vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
js动态添加meta标签
有时候我们需要动态添加meta标签和里面的内容,如何添加呢? 举例: // 手动添加mate标签const addMeta = (name, content) => {const meta = ...
vue-meta-info动态设置meta标签
网站的访问流量中,有相当一部分都是来自于搜索引擎,而来自于搜索引擎的流量又全部是免费的,所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接 ...
动态设置meta标签
亲测可用,若有疑问请私信有时候在项目中打开别的网页,需要给网页设置meta,如缩放禁止等.这时候在index.html中设置失效需要额外设置. 可以使用插件vue-meta: 文档:https:/ ...
移动端页面按手机屏幕分辨率自动缩放的js
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parse ...
Asp.net设置Meta标签优化好你的页面
Asp.net设置Meta标签优化好你的页面 Asp.net设置Meta标签优化好你的页面,在没有搜索引擎的时代,Meta标签仅用于记录这个网页的作者,版权信息等内容;但随着搜索引擎的出现,Meta出 ...
html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...

通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）

通过JS动态设置meta标签，根据手机屏幕分辨率自动缩放适配各手机（包括适配华为、oppo大屏幕手机、钉钉、微信）相关推荐

最新文章

热门文章