移动Web开发小结

derek_334892 发布于2019-08-29 11:22 / 1619人阅读

摘要：在做移动开发时有很多地方跟端是不一样的，需要不一样的设置，这里就记录下移动开发中有用的设置和一些通用代码。其他关于打电话发短信发邮件的实现打电话给发短信给发邮件给关于布局移动端中对于的支持已经很好，是布局神器。

在做移动 Web 开发时有很多地方跟 PC 端是不一样的，需要不一样的设置，这里就记录下移动 Web 开发中有用的设置和一些通用代码。

我的博客地址 HTML 设置页面宽度等于设备宽度，并禁止用户缩放页面

忽略页面中的数字识别为电话，忽略email识别

开启对web app程序的支持（仅针对IOS系统）

网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

改变顶部状态条的颜色（仅针对IOS系统）

在 web app 下状态条（屏幕顶部条）的颜色默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

完整的HTML模板









标题


这里开始内容

CSS css reset

html{
    -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉触摸遮盖层*/
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-user-select: none;/*禁止用户选择文字*/
}

/*设置所有盒子大小计算边框内*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

/*消除输入框的阴影和边框*/
input,textarea, select{
    -webkit-appearance: none; /*去掉webkit默认的表单样式*/
    appearance: none;
    outline: none;
    border: none;
}

消除transition动画闪屏

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

开启硬件加速

解决页面闪白，保证动画流畅。

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

其他 关于打电话、发短信、发邮件的实现

打电话给：10086
发短信给：10086
发邮件给：zhangxy_92@outlook.com

关于布局

移动端中对于flexbox的支持已经很好，flexbox是布局神器。阮一峰老师写过flexbox 入门教程；以后自己可能也会写一篇flexbox的学习和总结笔记。

GPU云服务器云服务器移动web开发 web移动端开发 HTML5移动Web开发指南移动web

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111603.html

移动web开发问题和优化小结

摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...

galaxy_robot 2019-08-01 17:40 评论0 收藏0
移动web开发问题和优化小结

摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...

ysl_unh 2019-08-21 16:44 评论0 收藏0
移动前端开发经验小结

摘要：一概要本文档针对移动前端开发，包括里面的页面，非应用。一个失败的圆圆角在移动平台上开发时，用画一个圆很简单，只需要一句代码不过，在上，这个定义将会失效，而显示为默认的矩形。一、概要本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。二、适用所有经验适用于：iOS6.0+, Android4.0+ 三、小结 css伪类:active 如果你想使...

Zoom 2019-08-29 16:17 评论0 收藏0
移动前端开发经验小结

摘要：一概要本文档针对移动前端开发，包括里面的页面，非应用。一个失败的圆圆角在移动平台上开发时，用画一个圆很简单，只需要一句代码不过，在上，这个定义将会失效，而显示为默认的矩形。一、概要本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。二、适用所有经验适用于：iOS6.0+, Android4.0+ 三、小结 css伪类:active 如果你想使...

baiy 2019-08-02 11:09 评论0 收藏0