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实现视频轮播在pc端与移动端均可
Sep 29 Javascript
js数组的操作指南
Dec 28 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
RequireJS使用注意细节
May 15 Javascript
移动端js图片查看器
Nov 17 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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位运算的简单权限设计
2013/06/30 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python内存管理实例分析
2019/07/10 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
五种Python转义表示法
2020/11/27 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
迎元旦广播稿
2014/02/22 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python