主流浏览器支持安装的最高版本号
主流浏览器对Vue支持的最低版本号
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的ECMAScript 5特性Object.defineProperty实现数据追踪，故不支持IE8及更低版本的浏览器，但它支持所有兼容 ECMAScript 5 的浏览器。
xp系统下能安装的主流浏览器最高版本号
主流浏览器支持canvas、svg的最低版本号
主流浏览器对Vue-UI框架常用的css3属性支持的最低版本号
主流浏览器对于Vue-UI框架的支持度分析
我对国内最热门的Vue UI框架element-ui着重进行调查，element-ui对IE10及以上的浏览器兼容性好，对IE9浏览器支持不好，原因从上表就可以得知，IE9对css3的支持度不好，大多数css3属性都不支持，而element-ui的一些组件又是基于css3开发的，如el-row、el-col、el-upload组件在IE9上无法使用，el-input、el-table组件在IE9上部分功能也用不了。
总结
本次总部项目要求支持xp系统，xp系统最高只能安装IE8浏览器，因为vue设计特性的原因，vue只在IE9及以上浏览器才能运行，但IE9对css3支持较差，vue生态对IE10以上的浏览器才展现良好的支持性。所以如果决定使用vue技术栈，就要抛弃IE8，如果需要兼容IE8，就不能用vue，转而考虑可以兼容IE8的react技术栈或兼容性更好的jQuery。
另一种方法是建议在xp系统下安装另外两个主流浏览器firefox以及chrome，在xp系统下可以安装到chrome v49、firefox v52，更重要的是这两个现代浏览器很早就与标准对接，在它们早期的版本chrome v4、firefox v2就对大部分的css3属性以及所有ES5标准进行支持，在chrome v20、firefox v20几乎对所有的css3属性进行了支持，vue在这些浏览器上可以完美的运行。
鉴于以上分析，我建议该项目放弃对IE8及以下浏览器的支持，推荐安装firefox以及chrome这两个浏览器，如果需要支持IE9，需要做好UI框架部分Vue组件无法使用的准备。如果总部要求必须支持IE8浏览器或更低的浏览器版本，建议使用jQuery，详细分析，可以看我另一篇关于 《主流前端框架对IE浏览器支持度调查》
1、style 中设置竖屏时的屏幕处理 @media screen and (orientation:portrait)@media screen and (orientation: portrait) { /*竖屏样式*/ body {transform-origin: 0 0 transform: rotateZ(90deg) translateY(-100%) }}2、在页面加载的时候，进行必要的页面宽高处理forceLandscapeScreenHandle() { const body = document.getElementsByTagName('body')[0] const html = document.getElementsByTagName('html')[0] const width = html.clientWidth const height = html.clientHeight const max = width >height ? width : height const min = width >height ? height : width body.style.width = max + "px" body.style.height = min + "px" }三、注意事项1、添加窗口变化的重新 宽高处理onWindowSizeChanged() { window.addEventListener("resize", this.forceLandscapeScreenHandle)}2、为了页面的变化太多，可以设置屏幕的最大最小比例<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--><!-- 目的是 让界面显示 更加适应 手机屏幕--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">四、效果预览五、实现步骤这里构建 Vue 工程，可参见Web 前端 之 Vue vue cli 环境的搭建简单整理（简单的一些注意事项）_仙魁XAN的博客-CSDN博客1、打开 Vue 工程，在 public/index.html 中添加如下 meta 标签处理，屏幕比例的限制处理<!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--><!-- 目的是 让界面显示 更加适应 手机屏幕--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">2、在 src/App.vue 中添加测试的内容3、添加 style 样式，关键处理竖屏时的页面，相关如下4、在页面加载进行 宽高处理5、最后运行工程，效果如下六、关键代码1、public/Index.html<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度，这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面--><!-- 目的是 让界面显示 更加适应 手机屏幕--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %>doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body></html>2、src/App.vue<template> <div id="container"> TestForceLandscapeScreen </div></template><script>export default { name: 'ThreeTest', components: {}, data() {return {} }, mounted() { this.init() }, methods: { init() { this.forceLandscapeScreenHandle() // 这里监控 this.onWindowSizeChanged() }, forceLandscapeScreenHandle() { const body = document.getElementsByTagName('body')[0] const html = document.getElementsByTagName('html')[0] const width = html.clientWidth const height = html.clientHeight const max = width >height ? width : height const min = width >height ? height : width body.style.width = max + "px" body.style.height = min + "px" }, onWindowSizeChanged() { window.addEventListener("resize", this.forceLandscapeScreenHandle)} }, // beforeDestroy 废弃，使用 beforeUnmount beforeUnmount() { }} </script><style>#app { /*文字居中*/ display: flex justify-content: center align-items: center text-align: center height: 100%} * { /*初始化样式*/ margin: 0 padding: 0} html { /*用于 获取 屏幕的可视宽高*/ width: 100% height: 100% overflow: hidden} body { /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/ position: fixed left: 0 top: 0 width: 100% height: 100%} @media screen and (orientation: portrait) { /*竖屏样式*/ body {transform-origin: 0 0 transform: rotateZ(90deg) translateY(-100%) }}</style>七、其他1、参考博文1）移动端如何让页面强制横屏_Fizz_kai的博客-CSDN博客_html 强制横屏2）h5横屏（以vue为例） - 江峰★ - 博客园2、其他实现强制横屏参考强制横屏展示，这里用到了css3的旋转功能，就是对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可。代码如下：在mounted生命周期中监听resize事件：window.addEventListener('resize', this.resize)resize方法如下： resize () { var width = window.innerWidth, height = window.innerHeight, $wrapper = document.getElementById("app"), style = "" if (width >= height) { // 横屏style += "width:" + width + "px" // 注意旋转后的宽高切换style += "height:" + height + "px" style += "-webkit-transform: rotate(0)transform: rotate(0)" style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px" style += "transform-origin: " + width / 2 + "px " + width / 2 + "px" } else { // 竖屏style += "width:" + height + "px" style += "height:" + width + "px" style += "-webkit-transform: rotate(90deg)transform: rotate(90deg)" // 注意旋转中点的处理style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px" style += "transform-origin: " + width / 2 + "px " + width / 2 + "px" } $wrapper.style.cssText = style }接下来就是适配的问题了。我采用的是vw跟vh。以前没用过，初次接触，用过之后感觉真的挺好用的。假如ios用户开启了屏幕固定或者android用户开启了屏幕自动旋转。这两种情况下，会有一点不一样。这时候使用css判断横竖屏就显得尤其重要了。代码如下： /* 竖屏 */@media screen and (orientation:portrait) {// 以vw为单位} /* 横屏 */@media screen and (orientation:landscape) {// 以vh为单位}在竖屏的时候使用vw来进行适配。即根据屏幕的宽度来适配。这里以375 x 667的设计稿为例。例如：一个元素宽为526，高为314。根据屏幕的宽度来适配的话就是526/375 * 100% vw、314/375 * 100% vw了。如果是横屏的话，就是用vh来进行适配。即根据屏幕的高度来适配。同样以375*667的设计稿为例。此时元素宽为526，高为314。就该写成宽为526/375 * 100% vh、高为314/375 * 100% vh了tips:最近又重新研究了一下横屏这个，发现其实不管ios用户是否开启了屏幕固定或者android用户是否开启了屏幕自动旋转，，都不需要使用css判断横竖屏来写两套样式了，只需要以正常情况(即竖屏下)的宽度来计算，然后使用vmin作为单位即可，这样写一套样式就全部搞定了。（vmin是相对于视口的宽度或高度中较小的那个来计算的）
