h5开发的一些个人总结

2019-04-22 H5案例分享 H5案例分享

在之前开发一些h5活动页的过程中,踩过了一些坑,所以整理出一些个人所接触到的对于h5活动页开发的总结,主要分为:布局适配,交互体验,兼容,调试工具这四个方面。欢迎大家补充指正。

 

1. 布局适配

 

a. 让当前viewport的宽度等于设备的宽度

 

<meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">

 

理解:

 

  •  

    phys.width,device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width。 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px,而css-width为375px。

    浏览器的一个默认行为: 假设,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,肯定会放不下,手机端横向会出现滚动条,怎么处理这个问题呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px; opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。

     

    meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1"的作用体现 (meta标签中,width有两个含义,第一、width为phys.width,第二,width也为虚拟窗口的width)

     

    此时的iPhone6的phys.width也变成了css-width即375px,可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

     

    如果此时的设计图是375px的手机端页面,此时的虚拟窗口的宽度也为375px,再装进phys.width为375px的手机,当然如设计稿一样的效果,不会缩放,也不会出现横向滚动条。

     

 

 

 

 

 

b. Rem 适配

 

为了精确的还原视觉稿,移动端样式采用px作为默认单位,使用postcss-pxtorem作为转换rem工具插件
安装


 yarn add postcss-pxtorem
 #OR
 npm i postcss-pxtorem -S

package.json配置(以width375视觉稿为准)

 

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": "37.5",
        "propList": ["*"]
      }
    }
  }

 

在index.html中重置root节点的rem数值

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    // 事件监听
    document.addEventListener('DOMContentLoaded', resetRem)
    window.onresize = resetRem
    /**
     * [resetRem 重置Rem数值]
     */
    function resetRem () {
      let documentCtx = document.documentElement
      documentCtx.style.fontSize = documentCtx.clientWidth / 10 + 'px'
    }
  </script>
</html>

 

input的placeholder文本位置偏上的情况

 

input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;

 

2. 交互体验

 

a. 去掉 a,input 在移动端浏览器中的默认样式 (禁止 a 标签背景 在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景)


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

b .禁止长按 a,img 标签长按出现菜单栏(使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏):

 

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

 

c. 流畅滚动

 

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

 

d. 禁止用户长按选中

 

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器  
-khtml-user-select:none; //早期浏览器 
-moz-user-select:none; //火狐 
-ms-user-select:none; //IE10 
user-select:none; 

 

e. transition清除闪屏

 

有时候需要使用到一些动效,但是会出现闪屏的情况

 

-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现:保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见:隐藏

 

3.兼容

 

a. vue2.0打包出来的项目在ios9中打开会白屏

 

这是个较为隐蔽的问题,当时线上出这个问题的话定位了很久,按照网上搜出来的结果都是说es6的结果没有转译,所以就尝试安装了一些转译插件。后面发现只需要在config/index.js里改一下声明关键词, 然后问题就解决了。

 
const path = require('path')
// 改为
var path = require('path')

b. 某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发

 

针对此种情况只需对不触发click事件的元素添加一行css代码即可

cursor: pointer;

 

c. ios对时间date()的支持不一样

 

var date =new Date("2016-05-31 00:00:00 ");

 

这种写法在安卓和pc上都正常的,唯独在ios手机上会显示NAN,调试发现,ios上只支持格式:

 

var date =new Date("2016/05/31 ");

 

调试发现2016/05/31等同2016-05-31 00:00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00

 

d. text-indent和box-sizing,部分安卓机中使用text-indent属性会使元素宽度超过100%


// 加上即可正常
box-sizing: border-box;

4.调试工具 --- Xcode

 

在这些样式交互完成之后,在移动端我们需要进行接口调试,这样的话我们就很希望能像pc端的开发一样,可以看到控制台, 网络请求情况这些信息,能够更好的帮助我们完成开发,定位问题。 之前想查看接口信息的话,是使用charles抓包工具的,但是个人觉得还是并不是那么方便,没有做到很好的集成。下面介绍一下我本人习惯使用的工具Xcode

  • 打开调试工具,选择Simulator

 

  • 在Hardware中选择我们要进行调试的机型以及系统

 

  • 打开浏览器,输入一个本地项目的地址,同时打开safari浏览器,在开发模式下可以看到本地项目的服务地址

 

 

选中之后,就可以查看网络请求,控制台之类的信息了

 

 

 

作者:林晖
链接:https://juejin.im/post/5c733ffce51d453aaa1d37e5
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 

 

 

(转自掘金的h5开发的一些个人总结,作者:林晖,链接:https://juejin.im/post/5c733ffce51d453aaa1d37e5

 

 

 

 

以上为“H5案例分享”团队转载文章,版权归原作者所有。


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

掘金:2016年互联网从业资格证考题泄露,快来测测你能拿多少分!

bang's blog:移动 H5 首屏秒开优化方案探讨

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

方式一:

通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿

方式二:

在电脑端,进入H5案例发布界面,自己编写

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~