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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
Vue.js表单控件实践
Oct 27 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
详解js类型判断
May 22 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
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
JAVA/JSP学习系列之四
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php Smarty 字符比较代码
2011/02/27 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue 2.0封装model组件的方法
2017/08/03 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python与R语言的简要对比
2017/11/14 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python I/O与进程的详细讲解
2019/03/08 Python
pandas中的series数据类型详解
2019/07/06 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python 爬虫的原理
2020/07/30 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
Python如何定义一个函数
2015/09/01 面试题
社区八一活动方案
2014/02/03 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
教师先进个人材料
2014/12/17 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
详解Golang如何优雅的终止一个服务
2022/03/21 Golang