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 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
jquery中ajax学习笔记4
2011/10/16 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
javascript变量提升和闭包理解
2018/03/12 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
浅谈python中set使用
2016/06/30 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python如何读取文件中图片格式
2020/01/13 Python
python 实现性别识别
2020/11/21 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
金融专业个人求职信范文
2013/11/28 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书