移动端前端笔记 — 常见JS与CSS问题及解决方法

桃扇骨 2022-06-01 00:24 136阅读 0赞

## **一. css部分** ##

body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，要再加一层div设置 height:100%加overflow：hidden（html,body加height:100%） ，这样元素超出body的高度也不能滑动了

meta标签

做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为640\*960（我是觉得这个尺寸好，也看不少的图片也是这个尺寸，是情况而定）

去除webkit的滚动条

element::-webkit-scrollbar{
    
        display: none;
    
    }

去除button在ios上的默认样式

-webkit-appearance: none;
    
    border-radius: 0

不想让按钮touch时有蓝色的边框     -webkit-tap-highlight-color:rgba(0,0,0,0);

如果要用到fixed譬如导航等，可以用absolute达到一样的效果，把body设为100%；将元素absolute到body上即可

在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition或者animation的效果将会非常棒。

使用图片时，会发现图片下总是有大概4px的空白，常用解决方法有

img\{display:block\}；

img\{vertical-align:top\}也可取其他几个值，视情况而定

其他解决办法 [见此][Link 1]

学会使用display:-webkit-box的布局，能很好地帮我们做到页面自适应，譬如 导航栏 这些个人觉得特别适合。

使用 a 标签的话，尽量让 a 标签 block ，尽量让用户可点击区域最大化

两个页面使用了transform之后，页面下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了，如果遇到这个问题的，详细可以 [看这][Link 2]

在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定

禁止用户选中文字   \-webkit-user-select:none

当你把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box

关于box-sizing:border-box，此属性是把边框的高宽包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行

要table的td用col设置了宽度后超出部分隐藏的话给table加属性table-layout:fixed（固定宽度布局）

如果想改变 placeholder  里的文字，需要用css伪类      ::-webkit-input-placeholder\{color:\#ccc\}。

### 二. JS部分 ###

1.  如果使用jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches\[0\].pageX，获取touchend则用 e.originalEvent.changedTouches\[0\].pageX
2.  利用style获取获取transform的rotate值
    
    parseInt(/rotateX\\((.\*?)\\)/.exec(getALL.style.webkitTransform)\[1\])
    
    如果页面一开始没有style值，rotate是写在CSS里的，需要用到getComputedStyle，具体请看[这里][Link 3] 。
3.  有些版本的iphone4中， audio和video默认播放事件不会触发，比如使用window.onload或计时器等都不能触发播放，必须用JS写事件让用户手动点击触发才会开始播放
4.  想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault() 就会 e 报错，处理方法为
    
    touchmove:function(e,参数一)\{
    
    var e=arguments\[0\]
    
    e.preventDefault()
    
    \}
5.  HTML5的新js API有新的选择器，比如querySelector(".class \#id")和querySelectorAll(".class  element")。
6.  点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟
7.  判断是否来自微信浏览器
    
    function isFromWeiXin() \{ 
    
    var ua = navigator.userAgent.toLowerCase();
    
    if (ua.match(/MicroMessenger/i) == "micromessenger") \{ 
    
    return true;
    
    \}
    
    return false;
    
    \}
8.  判断手机的类型
    
    var user="";
    
    if (/android/i.test(navigator.userAgent))\{
    
    //  android
    
    user="1";
    
    \}
    
    if (/ipad|iphone|mac/i.test(navigator.userAgent))\{
    
    //  ios
    
    user="0";
    
    \}
9.  如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果irame里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）
10. 微信升级到6.0后，在微信网页里需要用到设置分享的标题等，需要用到JSSDK，同时去微信公众平台里绑定里放置网页的域名。   
    不过JSSDK也不是所有问题都解决了，在android里点击分享到朋友圈时就触发了分享成功的回调函数，即使取消分享也已经触发了成功的函数（现在不知道是否有修复，如果遇到了这类问题，应该就是这个原因）。

[Link 1]: http://blog.sina.com.cn/s/blog_4990aec60100rckt.html
[Link 2]: http://segmentfault.com/q/1010000002480824
[Link 3]: http://segmentfault.com/q/1010000002512591?_ea=121887