包含withoutjavascriptenabled的词条
网页无法正常操作,提示说必须JavaScript enabled
好象
单击“Internet 选项”。 单击“安全”选项卡。 单击“自定义级别”。 滚动到“脚本”，在“活动脚本”下，单击“启用”。 单击“确定”两次。
这个方法可以吧，
要不就把ie升级到7.0或重装
vue 打包上线后出现的问题
vue打包后有一个接口，提示：We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.
打包前一切ok，打包后唯独有一个接口出现了问题。
试了很多种方法譬如：
1，修改路由模式。
2，修改publicPath。
3，清空浏览器缓存。。
发现都没用。
但是突然想到，为什么就只有一个接口出现这个问题。
最后发现接口这里少了个斜线。
导致代理的路径错误。
感人。。
vue禁止横屏
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
strongWe'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是相对于视口的宽度或高度中较小的那个来计算的）