vue移动端html5页面根据屏幕适配的四种解决方法


Posted in Javascript onOctober 19, 2018

最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话,进行总结分享一下如何处理。在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用。

方法一:引入淘宝开源的可伸缩布局方案

引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击)

淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-width始终等于设备物理像素,屏幕大小动态计算根字体大小,具体是将屏幕划分为10等分。这块也可以直接用js实现,后面会提到

具体引入和使用方法,移步github查看,非常详细。

方法二:viewport 的使用

github里边,有提到  viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详细,包括比例、是否缩放等的属性介绍特别的详细,虽然文章的内容一大片的字看起来很多,但是请耐心看完,都是干货能很好的让你认识viewport。如果比较着急,请继续往下看总结图吧

关于 viewport 的,这块直接引用上面文章的内容,我感觉也是最干脆最直接的总结了吧

vue移动端html5页面根据屏幕适配的四种解决方法

方法三:使用js+viewport动态设置手动适配rem

我的编辑器是vscode,添加了插件cssrem自动转换

index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 <!-- 启用360浏览器的极速模式(webkit) -->
 <meta name="renderer" content="webkit">
 <!-- 避免IE使用兼容模式 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
 <meta name="HandheldFriendly" content="true">
 <!-- 微软的老式浏览器 -->
 <meta name="MobileOptimized" content="320">
 <!-- uc强制竖屏 -->
 <meta name="screen-orientation" content="portrait">
 <!-- QQ强制竖屏 -->
 <meta name="x5-orientation" content="portrait">
 <!-- UC强制全屏 -->
 <meta name="full-screen" content="yes">
 <!-- QQ强制全屏 -->
 <meta name="x5-fullscreen" content="true">
 <!-- UC应用模式 -->
 <meta name="browsermode" content="application">
 <!-- QQ应用模式 -->
 <meta name="x5-page-mode" content="app">
 <!-- windows phone 点击无高光 -->
 <meta name="msapplication-tap-highlight" content="no">
 <meta content="telephone=no" name="format-detection" />
 <meta name="huaban" content="nopin" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" rel="external nofollow" >
 <title>新茶饮</title>
 <script src="/config.js"></script>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 </head>
 <body>
 <div id="app"></div>
 <!-- 
 在iphone 5 中1rem=16px; 
 html font-size =16px=1rem;
 -->
 <script>
 //得到手机屏幕的宽度
 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
 console.log('htmlWidth',htmlWidth)
 //得到html的Dom元素
 let htmlDom = document.getElementsByTagName('html')[0];
 // if(htmlWidth>640){//超过640大小的,字体根部都是16px
 // htmlWidth=640;
 // console.log('htmlWidth-true',htmlWidth)
 // }
 //设置根元素字体大小
 htmlDom.style.fontSize = htmlWidth / 40 + 'px';
 </script>
 </body>
</html>

方法四:根据css的媒体查询动态设置根部html字体大小

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
 html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
 html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
 html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
 html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
 html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
 html { font-size: 843.75%; }
}

总结

以上所述是小编给大家介绍的vue移动端html5页面根据屏幕适配的四种解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 #Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
贷款委托书
2014/08/01 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
党员证明信
2015/06/19 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js