笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助。同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激!

一. css部分

  1. body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了。
    或者同时给html,body加height:100%;overflow:hidden
  2. meta标签

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了(980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。

    关于  initial-scale=1 ,这个参照iphone5的尺寸320*568,如果你页面按照640*1136做的话,scale就设为0.5

    <meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari允许全屏浏览

    <meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari顶端状态条样式

    <meta content="telephone=no" name="format-detection">  忽略将数字变为电话号码

    <meta content="email=no" name="format-detection">   忽略识别email

  3. 做全屏显示的图片时,一般为了兼容大部分的手机,图片尺寸一般设为640*960(我是觉得这个尺寸好,也看不少的图片也是这个尺寸,视情况而定)
  4. 去除webkit的滚动条

    element::-webkit-scrollbar{

    display: none;

    }

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

    -webkit-appearance: none;

    border-radius: 0

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

  7. 如果要用到fixed譬如导航等,可以用absolute达到一样的效果,把body设为100%;将元素absolute到body上即可,不过这样不能让body滚动,如果需要有滚动的地方,就放在div中滚动

  8. 在移动端做动画效果的话,如果通过改变绝对定位的top,或者margin的话做出来的效果很差,很不流畅,而使用css3的transition或者animation的效果将会非常棒(这一方面IOS比android又要好不少)。
    如果用translate3d来实现动画,会开启GPU加速,硬件配置差的安卓用起来会耗性能,需慎用(借用1楼评论的)

  9. 使用图片时,会发现图片下总是有大概4px的空白,(原因据说图片是inline,触发baseline什么的。。。)常用解决方法有

    img{display:block};

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

    其他解决办法  见此

  10. 学会使用display:-webkit-box的布局,能很好地帮我们做到页面自适应,譬如 导航栏 这些个人觉得特别适合,具体使用方法此处不叙述

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

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

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

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

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

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

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

  17. 如果想改变 placeholder  里的样式,需要用css伪类。    如  ::-webkit-input-placeholder{color:#ccc}

  18. 做一个方向箭头比如  “>” 时,可以用一个正方形的div,设置border:1px 1px 0 0;然后rotate(45deg)
  19. CSS权重:style是1000,id是100,class是10,普通如li、div和伪类是1,通用如*是0;

  20. 使用rem时,设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时,在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决:利用js获取文字line-height再去设置div高度

二. 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,具体请看这里

  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. 用e.preventDefault()会阻止的scroll,click等事件

三. 微信部分

    1. 判断是否来自微信浏览器

      function isFromWeiXin() {
          var ua = navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
              return true;
          }
          return false;
      }
    2. 判断手机的类型

      var user="";
              if (/android/i.test(navigator.userAgent)){
              //  android
                  user="1";
              }
              if (/ipad|iphone|mac/i.test(navigator.userAgent)){
                  //  ios
                  user="0";
              }
    3. 微信浏览器里均不能打开下载的链接,需在浏览器打开

    4. 如果在网页里嵌套一个iframe,src为其他的网址等,当在微信浏览器打开时,如果irame里的页面过大,则iframe的src不能加载(具体多大不知道,只是遇到过)

    5. 微信升级到6.0后,在微信网页里需要用到设置分享的标题等,需要用到JSSDK,同时去微信公众平台里绑定里放置网页的域名。
      不过JSSDK也不是所有问题都解决了,在android里点击分享到朋友圈时就触发了分享成功的回调函数,即使取消分享也已经触发了成功的函数(现在不知道是否有修复,如果遇到了这类问题,应该就是这个原因)

移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 ( 摘自zdwzdwzdw)的更多相关文章

  1. 移动端遇到的常见JS与CSS问题及解决方法

    由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...

  2. PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

  3. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS 无法清除Cookie的解决方法

    JS 无法清除Cookie的解决方法   项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 doc ...

  5. 【FAQ】接入HMS Core推送服务,服务端下发消息常见错误码原因分析及解决方法

    HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端,可以从服务器发送下行消息给终端设备.这篇文章汇总了服务端下发消息最常见的6个错误码,并提供了原因分析和解决方法,有遇到类似问题的 ...

  6. 移动端页面以rem为单位设置字体大小不生效解决方法

    这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...

  7. 【笔记】vue-cli 打包后路径问题出错的解决方法

    几天之前打包自己的vue 项目上传到远程服务器上面 但是遇到了如下几个问题: 1. 线上浏览页面时是空白页面 2. 打包后资源文件(js, css 文件)引用的路径不正确 3. 开发环境中使用到的如: ...

  8. Tomcat常见的内存溢出,以及解决方法

    一.常见的三种内存溢出错误: 1.java.lang.OutOfMemoryError:java heap space    ====JVM Heap(堆)溢出 JVM再启动的时候回自动设置JVM H ...

  9. vue学习笔记(四)- cmd无法识别vue命令解决方法

    解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将“vue”项识别为 c ...

随机推荐

  1. 如何使用SQLPLUS分析SQL语句(查询执行计划跟踪)

    方法一:autotrace 1,  connect sys/密码 as sysdba,在sys用户下运行$ORACLE_HOME/sqlplus/admin/plustrce.sql这段sql的实际内 ...

  2. 犀利点评:csdn某文<第一次创业还是失败了---分享失败的经验>

    今天上午在csdn看了一篇创业文,突然想无节操的做一下点评. 原文详细地址如下:http://blog.csdn.net/android_tutor/article/details/9815801 以 ...

  3. 两个APP之间怎么调用《IT蓝豹》

    两个app之间怎么调用?   (1):通过显示Intent 启动    首先:配置好B app 的action,即AndroidManifest.xml中声明 <intent-filter> ...

  4. Ext.get Ext.getDom Ext.getCmp 的区别

    Html DOM     Ext Element   Component Component 最高层 Html DOM 最基础 Ext.getCmp  是  Ext.ComponentMgr.get ...

  5. Action名称的搜索顺序

    假设当前的路径的URL是:http://StrutsDemo01/path1/path2/path3/test.action 步骤1.首先寻找命名空间(namespace)为 /path1/path2 ...

  6. div+css的第一个布局

    ---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  7. @EnableAutoConfiguration

    1. spring文档 解释一: Enable auto-configuration of the Spring Application Context, attempting to guess an ...

  8. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  9. js 日期对象Date以及传参

    创建一个日期对象,日期对象可传参new Date() 创建日期对象getFullYear() 获取年份 getMonth() 获取月份 返回值是 0(一月) 到 11(十二月) 之间的一个整数 get ...

  10. Linux下调试程序方法

    您可以用各种方法来监控运行着的用户空间程序:可以为其运行调试器并单步调试该程序,添加打印语句,或者添加工具来分析程序.本文描述了几种可以用来调试在 Linux 上运行的程序的方法.我们将回顾四种调试问 ...