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"/>

原文地址:https://www.cnblogs.com/MisterHe/p/10232310.html

时间: 2024-10-01 20:09:08

rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签的相关文章

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

Vue项目中使用vw实现移动端适配

我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采用vue-cli脚手架搭建完项目,安装所有依赖包之后,用npm run dev启动后,在根目录有一个 .postcssrc.js 文件,文件结构如下: vue-cli默认已经安装以上三个插件: postcss-import:相关配置可以点击这里.主要功有是解决@import引入路径问题.使用这个插件

VUE项目多环境配置.md

目录 一.了解webpack.DefinePlugin 二.项目中如何配置多环境 web项目开发,通常需要有开发环境.测试环境和生产环境,用于配置不同的环境变更,如调用本地接口.测试接口和生产接口,VUE项目是前后端完全分离的框架,像是web界的C/S构架,在做VUE前端开发时,就需要用开发环境甚至于mock环境,等项目上线时,则需要使用生产的环境变量进行打包部署. 一.了解webpack.DefinePlugin webpack是静态模块打包器,可以将vue项目中所有文件打包成一个或多个jsb

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

如何在Vue项目中使用Typescript

0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新的项目目录. mkdir typescript-vue-tutorial cd typescript-vue-tutorial 接着,在目录中创建如下目录结构. typescript-vue-tutorial/ ├─ dist/ └─ src/ └─ components/ TypeScript文件

如何在Vue项目中给路由跳转加上进度条

1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验.本篇文章就来教你如何在Vue项目中实现这样的进度条. 2.安装Nprogress 虽然我们也可以自己手动实现这样的功能,但是,nprogress.js已经帮我们把进度条的样式呀,功能呀都已经封装的很好了,既然有现成的轮子,我们就直接使用轮子就好啦! npm inst

vue项目中net::ERR_CONNECTION_TIMED_OUT错误

我出错的原因时network地址与我本机ip地址不一致 Network: http://192.168.13.30:8080/ 处理方法: 在vue项目中新建一个vue.config.js文件 配置上: module.exports = { devServer: { host: '0.0.0.0', port: 8080, } } 这样重启项目,地址改为自己ip地址就可以了 原文地址:https://www.cnblogs.com/zhangshengxiang/p/10170768.html