移动端web遇到过的坑

引入企业微信的SDK中遇到的一个坑,在做vue项目的时候通过npm配置企业微信的时候会出调用方法传值错误,要使用引入企业微信的js文件

1.为了实现某个功能  在微信网页中用js去获取网页的宽高   网上说的是 用document.documentElement.clientWidth  和document.documentElement.clientHeight  来获取宽高 

但是做过就知道 这个得到的不是我们以为的浏览器的宽度和高度   比如用5s测试 获得到的宽度好像是320(正常情况下  我们想要得到的是像素值  但是这个很明显不是我们想要的)

实际用window.screen.width和window.screen.heigth

2.页面用JS设置禁用滚动时

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); 
}, {passive: false});

这段代码要写到页面底部

3.假的DOM结构,比如input的一个选中状态,用jquery中的attr()进行添加和删除,在google调试中看到是正常的,但是传给后台的值是不对的。我找了很久才发现原因,我的DOM结构是假的。只是表面上看起来好像删除掉了,但实际并没有。

    解决办法:在当前代码下面用原生js再写一遍就好了,或者改用prop()方法都可以。

关于移动端开发的一些基础设置问题

1.禁止页面缩放

<head>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

</head>

2.input框消除自动记忆功能

<input type="text" autocomplete="off">

//input的autocomplete属性默认是on:其含义代表是否让浏览器自动记录之前输入的值

//off:则关闭记录

3.禁止用户选中文字

-webkit-user-select:none

4.placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;} //input框提示的颜色

input:focus::-webkit-input-placeholder{color:green;} //聚焦时的提示的颜色

5.去除 button在 ios上的默认样式

-webkit-appearance: none;

border-radius: 0

6.CSS 超过一定宽度省略号…显示

overflow: hidden; /* 当字符串超过规定长度,显示省略符*/

text-overflow:ellipsis;

white-space: nowrap;

7.流畅滚动

body{ -webkit-overflow-scrolling:touch; }

8.禁止长按 a,img 标签长按出现菜单栏 
使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下:

a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

9.禁止 a 标签背景 
在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下

a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ }

猜你喜欢

转载自blog.csdn.net/qq_42417923/article/details/81239887