web移动端开发经验总结

整理web移动端开发经验，部分内容借鉴于网上的博文。

1、meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /><!-- width可视宽度，initial-scale初始化缩放比例，maximum-scale允许用户缩放的最大比例，minimum-scale允许用户缩放的最小比例，user-scalable是否允许用户缩放。--><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 设置Web应用是否以全屏模式运行。删除默认的苹果工具栏和菜单栏。如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 控制状态栏显示样式。设置为blank-translucent，则状态栏显示为黑色半透明。--><meta name="format-detection" content="telephone=no" /><!-- 禁止ios把数字转化为拨号链接 -->

2、屏蔽ios点击元素时出现的阴影

-webkit-tap-highlight-color:rgba(255,255,255,0);

3、ios 设置input 按钮样式会被默认样式覆盖

input,textarea {border: 0; -webkit-appearance: none;
}

4、长度单位用rem

1rem = 16px;html {    <!-- 根元素 -->font-size:62.5%;
}
p {font-size:1rem;      <!-- 字体大小等于 = 10px   16px*62.5% = 10px-->
}

5、多用text-shadow这个属性，可以美化文字效果

　　 border-radius、box-shadow、gradient、border-image，在移动端都可以很好的支持，使用这些属性可以实现很炫丽的按钮。

6、iOS中禁止用户保存图片、复制图片

　　img标签指定 -webkit-touch-callout:none; 可以禁止设备弹出列表按钮，这样用户就无法保存/复制你的图片。

7、禁止用户进行复制, 选择

　　使用 -webkit-user-select: none; user-select:none;

8、html5调用安卓或者ios的拨号功能

　　html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

　　如下：

　　拨打手机直接如下

9、长时间按住页面出现闪退

element {-webkit-touch-callout:none;
}

10、设置缓存

　　手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

<meta http-equiv="Cache-Control" content="no-cache"/>

11、IOS键盘字母输入，默认首字母大写

　　解决方案，设置如下属性

<input type="text" autocapitalize="off"/>

12、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

　　可以通过正则去掉

this.value = this.value.replace(/\u2006/g,'');

13、点击事件

　　click 和 tap 比较两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms的延迟，所以请用tap代替click作为点击事件。

待续~~

转载于:https://www.cnblogs.com/chenglu/p/7517882.html

web移动端开发经验总结相关推荐

Web服务端性能提升实践
随着互联网的不断发展,日常生活中越来越多的需求通过网络来实现,从衣食住行到金融教育,从口袋到身份,人们无时无刻不依赖着网络,而且越来越多的人通过网络来完成自己的需求. 作为直接面对来自客户请求的Web ...
OpenStack环境搭建（四：web控制端各节点的部署及配置）
实验要求: 完成Virtual box平台安装,会应用相关操作: 在virtual box虚拟平台上部署Fuel Master节点: 在virtual box虚拟平台上部署计算节点Computer: ...
Web移动端Fixed布局的解决方案
Web移动端Fixed布局的解决方案参考文章: (1)Web移动端Fixed布局的解决方案 (2)https://www.cnblogs.com/sxgxiaoge/p/9257648.html 备 ...
vlc web 登录账号_怎么在web网页端解绑敬业签绑定的手机号？
支持手机电脑多端同步的便签软件敬业签可以用来记录备忘事项,同时针对记录的备忘事项可设置时间提醒.在使用敬业便签时,为了确保数据的安全,以及在日后使用时方便找回账号密码,可以将便签账户和手机号绑定在一起 ...
php开源饭馆记账软件_GitHub - CNYoki/xxjzWeb: 小歆记账WebApp项目(Web服务端)
小歆记账WebApp项目(Web服务端) 1.简介小歆记账WebApp是一个面向移动端的记账工具,此项目为Web服务端:使用ThinkPHP+MySQL作为后台,AmazeUI作为前端. 项目基础版 ...
从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
Web浏览器端通过https 使用mqtt通讯
做的产品简介这次需要做一个web端的上课平台,有音视频通讯,有白板(画板)功能,有文字通讯等. 技术点音视频通讯需要走Webrtc 需要跟ios, android, windows, mac 客户 ...
web服务端的架构演变
此文已由作者肖凡授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 最近Lofter项目碰到很多性能上的问题,特别是数据库相关的,每次推送后,告警就会第一时间到来.这些问题随着产 ...
web移动端常见问题解决方案 (转)
总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...

web移动端开发经验总结

web移动端开发经验总结相关推荐

最新文章

热门文章