码迷，mamicode.com
首页 > 移动开发 > 详细

web移动端

时间：2015-07-16 11:31:12      阅读：145      评论：0      收藏：0      [点我收藏+]

标签：

meta基础知识
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

viewport模板

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

常见问题

移动端如何定义字体font-family
中文字体使用系统默认即可，英文用Helvetica

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
参考《移动端使用字体的思考》

移动端字体单位font-size选择px还是rem
对于只需要适配手机设备，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考：

  1. html {font-size:10px}
  3. @media screen and (min-width:480px) and (max-width:639px) {
  4.     html {
  5.         font-size: 15px
  6.     }
  7. }
  9. @media screen and (min-width:640px) and (max-width:719px) {
  10.     html {
  11.         font-size: 20px
  12.     }
  13. }
  15. @media screen and (min-width:720px) and (max-width:749px) {
  16.     html {
  17.         font-size: 22.5px
  18.     }
  19. }
  21. @media screen and (min-width:750px) and (max-width:799px) {
  22.     html {
  23.         font-size: 23.5px
  24.     }
  25. }
  27. @media screen and (min-width:800px) and (max-width:959px) {
  28.     html {
  29.         font-size: 25px
  30.     }
  31. }
  33. @media screen and (min-width:960px) and (max-width:1079px) {
  34.     html {
  35.         font-size: 30px
  36.     }
  37. }
  39. @media screen and (min-width:1080px) {
  40.     html {
  41.         font-size: 32px
  42.     }
  43. }

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

打电话发短信的怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>

屏幕旋转的事件和样式
事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

  1. window.onorientationchange = function(){
  2.     switch(window.orientation){
  3.         case -90:
  4.         case 90:
  5.         alert("横屏:" + window.orientation);
  6.         case 0:
  7.         case 180:
  8.         alert("竖屏:" + window.orientation);
  9.         break;
  10.     }
  11. }  

样式

  1. //竖屏时使用的样式
  2. @media all and (orientation:portrait) {
  3. .css{}
  4. }
  6. //横屏时使用的样式
  7. @media all and (orientation:landscape) {
  8. .css{}
  9. }
  11. audio元素和video元素在ios和andriod中无法自动播放
  12. 应对方案：触屏即播
  14. $(‘html‘).one(‘touchstart‘,function(){
  15.     audio.play()
  16. })

摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

手机拍照和上传图片

  1. <input type="file">的accept 属性
  3. <!-- 选择照片 -->
  4. <input type=file accept="image/*">
  5. <!-- 选择视频 -->
  6. <input type=file accept="video/*">

常用的移动端框架

zepto.js
语法与jquery几乎一样，会jquery基本会zepto~

最新版本已经更新到1.16

官网：http://zeptojs.com/

中文(非官网)：http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块：

浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~

实现下拉刷新，滑屏，缩放等功能~

最新版本已经更新到5.0

官网：http://cubiq.org/iscroll-5

underscore.js
笔者没用过，不过听说好用，推荐给大家~

该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

最新版本已经更新到1.8.2

官网：http://underscorejs.org/

滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js

iSlider.js

fullpage.js

flex布局
flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法，效果良好~

  1. /* ============================================================
  2.    flex：定义布局为盒模型
  3.    flex-v：盒模型垂直布局
  4.    flex-1：子元素占据剩余的空间
  5.    flex-align-center：子元素垂直居中
  6.    flex-pack-center：子元素水平居中
  7.    flex-pack-justify：子元素两端对齐
  8.    兼容性：ios 4+、android 2.3+、winphone8+
  9.    ============================================================ */
  10. .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
  11. .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
  12. .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
  13. .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
  14. .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
  15. .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}


示例：两端对齐

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6. <meta content="yes" name="apple-mobile-web-app-capable">
  7. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8. <meta content="telephone=no" name="format-detection">
  9. <meta content="email=no" name="format-detection">
  10. <style type="text/css">
  11. /* ============================================================
  12.    flex：定义布局为盒模型
  13.    flex-v：盒模型垂直布局
  14.    flex-1：子元素占据剩余的空间
  15.    flex-align-center：子元素垂直居中
  16.    flex-pack-center：子元素水平居中
  17.    flex-pack-justify：子元素两端对齐
  18.    兼容性：ios 4+、android 2.3+、winphone8+
  19.    ============================================================ */
  20. .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
  21. .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
  22. .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
  23. .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
  24. .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
  25. .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
  26. </style>
  27. </head>
  28. <body>
  30. <div class="flex flex-pack-justify">
  31.     <div>模块一</div>
  32.     <div>模块二</div>
  33.     <div>模块三</div>
  34.     <div>模块四</div>
  35. </div>
  37. </body>
  38. </html>

页面模块命名
头：header
        内容：content/container
        尾：footer
        导航：nav
        侧栏：sidebar
        栏目：column
        页面外围控制整体布局宽度：wrapper
        左右中：left right center
        登录条：loginbar
        标志：logo
        广告：banner
        页面主体：main
        热点：hot
        新闻：news
        下载：download
        子导航：subnav
        菜单：menu
        子菜单：submenu
        搜索：search
        友情链接：friendlink
        页脚：footer
        版权：copyright
        滚动：scroll
        小技巧：tips

web移动端

标签：

原文地址：http://www.cnblogs.com/kelly007/p/4650509.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！