rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签
在vue中配置rem
位置:在APP.vue的script中,在export default之外
(()=>{
let winW = document.documentElement.clientWidth,
desW = 1440,
htmlFont = winW / desW * 100;
window.htmlFont = htmlFont;
document.documentElement.style.fontSize = htmlFont + 'px';
})()
浏览器的兼容性之Mate标签
在vue项目index.html中
是否启用WebApp全屏模式,删除苹果默认的工具栏
<mate name="apple-touch-fullscreen" content="yes" />
启用360极速模式
<mate name="renderer" content="webkit" />
针对老的手持设备优化,不识别viewport
<mate name="HandheldFriendly" content="true" />
uc强制竖屏
<mate name="screen-orientation" content="portrait" />
QQ强制竖屏
<mate name="x5-orientation" content="portrait" />
UC强制全屏
<mate name="full-screen" content="yes" />
qq强制全屏
<mate name="x5-fullscreen" content="true" />
UC应用模式
<mate name="browsermode" content="application" />
QQ应用模式
<mate name="x5-page-mode" content="app" />
windows phone 点击无高光
<mate name="msapplication-tap-highlight" content="no" />
不被显示为拨号连接
<mate name="format-detection" content="telephone=no" />
优先使用IE最新版本和chrome
<mate http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
浏览器页面头像
<link rel="shortcut icon" href="图片路径" type="image/x-icon"/>
rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签的更多相关文章
- Vue 项目中 ESlint 配置
前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...
- vue项目中全局配置变量
在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
随机推荐
- [crypto] AEAD是啥
AEAD这个缩写根据不同的语境有两个理解角度:认证加密机制,认证加密方式. 认证加密机制是指:一些用来完成认证加密工作的方法,拆分为认证和加密两部分来做,先加密后加密先认证后认证都无所谓,整个过程或者 ...
- 学习ActiveMQ(七):JMS消息的事务管理
Spring提供了一个JmsTransactionManager用于对JMS ConnectionFactory做事务管理.这将允许JMS应用利用Spring的事务管理特性.JmsTransactio ...
- NodeJS笔记(六)-Express HTTP服务器启动后如何关闭
npm start启动网站,提示“3000”端口已经被使用的问题 nodejs WEB服务器并不随着cmd的关闭而终止 查看任务管理器可以看到nodejs的启动进程 可以手动关闭 如果是一直处于cmd ...
- Convert List<Entity> to Json String.
public static string ToJson(this object obj, string datetimeformats) { var timeConverter = new I ...
- 透过实现小型打包工具理解webpack
面试经常有问到 webpack,偶遇一篇比较有实用价值的且有利于理解的文章,现总结如下: 本篇文章中要实现的这个迷你打包工具,它主要能实现如下两个功能: ①.将 ES6 转换成 ES5: ②.支持在 ...
- 两个ArrayList之间求交并补
class ArraylistCalculate{ // 两个整数集求差集 public ArrayList<Integer> integerArrayListDifference( Ar ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- JFinal框架
FJinal过滤器(tomcat) 创建java类继承JFinalConfig 会实现六个方法(有一个是拦截器的方法好像是,那个我好像看的跟struts2一样但是又没看懂暂时不写) Controlle ...
- flask框架中,利用数据库增删查改
# 配置数据库app.config['SQLALCHEMY_DATABASE_URI'] = "mysql://root:mysql@127.0.0.1:3306/booktest" ...
- MyBatis探究-----为实体类Bean取别名,配置typeAliases
1.单个实体类设置别名 1.1 不使用alias <typeAliases> <!-- typeAlias:为某个java类型起别名 ; type:指定要起别名的类型全类名; 默认别 ...