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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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对象Object的概念 介绍
2012/06/14 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python中return self的用法详解
2018/07/27 Python
Python实现微信机器人的方法
2019/09/06 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
九年级物理教学反思
2014/01/29 职场文书
中学生班主任评语
2014/01/30 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers