移动Web开发小结

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

[[172539]]

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

我的博客地址

HTML

设置页面宽度等于设备宽度,并禁止用户缩放页面 

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

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

  1. <meta name="format-detection" content="telphone=no, email=no" /> 

开启对web app程序的支持(仅针对IOS系统)

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

  1. <meta name="apple-mobile-web-app-capable" content="yes" /> 

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

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

  1. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

完整的HTML模板 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  6. <meta name="apple-mobile-web-app-capable" content="yes" /> 
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
  8. <meta name="format-detection" content="telphone=no, email=no" /> 
  9. <title>标题</title> 
  10. </head> 
  11. <body> 
  12. 这里开始内容 
  13. </body> 
  14. </html> 

 CSS

css reset 

  1. html{ 
  2.     -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉触摸遮盖层*/ 
  3.     -webkit-user-modifyread-write-plaintext-only
  4.     -webkit-user-select: none;/*禁止用户选择文字*/ 
  5.  
  6. /*设置所有盒子大小计算边框内*/ 
  7. *, 
  8. *:before, 
  9. *:after { 
  10.     box-sizing: border-box; 
  11.  
  12. /*消除输入框的阴影和边框*/ 
  13. input,textarea, select
  14.     -webkit-appearance: none; /*去掉webkit默认的表单样式*/ 
  15.     appearance: none; 
  16.     outline: none; 
  17.     border: none; 
  18.  

消除transition动画闪屏 

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

开启硬件加速

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

  1. .css { 
  2.    -webkit-transform: translate3d(0, 0, 0); 
  3.    -moz-transform: translate3d(0, 0, 0); 
  4.    -ms-transform: translate3d(0, 0, 0); 
  5.    transform: translate3d(0, 0, 0); 
  6.  

其他

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

  1. <a href="tel:10086">打电话给:10086</a> 
  2.  
  3. <a href="sms:10086">发短信给:10086</a> 
  4.  
  5. <a href="mailto:zhangxy_92@outlook.com">发邮件给:zhangxy_92@outlook.com</a>  

关于布局

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

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2011-07-07 13:19:38

Web

2013-09-04 14:49:10

移动Web前端开发设计理念

2015-07-16 13:57:06

移动web开发规范

2012-03-06 16:57:40

jQuery mobijQuery mobiframework

2013-09-10 16:16:19

移动网站性能优化移动web

2011-10-28 11:20:25

移动Web

2011-12-29 10:48:49

移动Web

2011-05-11 09:47:14

mobl移动web开发

2011-03-01 09:23:47

移动Web应用开发成本

2015-08-28 08:44:43

web移动开发转行

2014-03-28 15:36:43

移动WebJavaScript开发框架

2015-08-28 09:19:53

Web开发移动开发

2012-01-18 14:29:42

移动Web应用开发

2011-09-02 16:42:51

Sencha ToucWeb应用

2012-09-28 09:12:39

移动Web

2011-02-21 09:10:42

WebHTML 5JavaScript

2011-12-28 17:08:11

移动Web开发开发工具

2009-10-19 09:15:05

移动Web开发

2012-02-01 13:39:31

移动Web设计开发

2009-07-01 16:26:10

jsp web开发
点赞
收藏

51CTO技术栈公众号