mobile web前端开发总结

1，meta标签

      <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>  

width – viewport的宽度
　　height – viewport的高度
　　initial-scale – 初始的缩放比例
　　minimum-scale – 允许用户缩放到的最小比例
　　maximum-scale – 允许用户缩放到的最大比例
　　user-scalable – 用户是否可以手动缩放

    忽略将数字变为电话号码：

<meta content="telephone=no" name="format-detection">

    IOS中Safari设置保存到桌面图标，这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

2，em单位。

在所有现代浏览器中，其默认的字体大小就是“16px”因此在浏览器下默认的设置将是：1em=16px；

如果将body字体设置为“font-size：62.5%”，那么1em=10px，1.2em=12px......

像素与em之间进行转换：

如果当前元素设置了font-size----  1 ÷ 当前元素的font-size × 需要转换的像素值 = em值；

如果当前元素未设置font-size----  1 ÷ 父元素的font-size × 需要转换的像素值 = em值；

可以使用上面的公式计算出您需要的任何宽度或高度的“em”值，你只需要知道“1px等于多少em”，另外就是你要转换的“px”值是多少，具备这几个参数你就能得到你想要的“em”值了。

另外em大小是想大于父及容器的，比如

<span style="font-size:14px;"><div class="pDiv">
<h2>title</h2></span>

<span style="font-size:14px;"><p>airticle</p>
</div>
<style></span>

<span style="font-size:14px;">  body{font-size：62.5%;}
  .pDiv{font-size:1.6em}
  .pDiv h2{font-size:1em;}</span>

<pre name="code" class="html"><span style="font-size:14px;">  .pDiv p{font-size:0.75em;}</span>

</style>

pDiv的字体实际为16px；

h2的字体实际为16px；1÷16*16=1em

p的字体实际为12px；1÷16*12=0.75em

例：在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为：

#wrapper {
				width: 200px;
				height: 100px;
				border: 5px solid red;
				margin: 15px;
				padding: 10px;
				line-height: 18px;
			}   

按照上面的公式，将所在参数进行转换：

#wrapper {
				width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/
				height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/
				border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/
				margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/
				padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/
				line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/
			}  

em实现页面自适应：

元素自身上的所有属性值如“boder、width、height、padding、margin、line-height都可以用em单位设定，每一个元素的属性都通过他的父及容器的字体大小通过公示来获取。这样在@media screen{}对应的分辨率标签中，只需设置每一个模块父级容器的font-size大小，从而模块内部元素会通过当前父级font-size实现em的相对缩放。

总结：

(1)、浏览器的默认字体大小是16px

(2)、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算：

  1 ÷ 父元素的font-size × 需要转换的像素值 = em值

(3)、如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

  1 ÷ 父元素的font-size × 需要转换的像素值 = em值

详细例子参考：http://www.uml.org.cn/html/201207311.asp

3,flex流动自适应响应式布局(仅限IE10+级chrome，FF，Safari)

自适应布局尽量避免float样式，通过display:inlie或box-flex实现

父元素设置display:box；子元素将不需设置float:left和display:inline，同样可以一行显示，不需要通过百分比及像素设置宽度，通过box-flex即可设置自适应可伸缩的容器，例子：

定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素：

div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}

详细解释参考：http://ce.sysu.edu.cn/hope/Item/116154.aspx

4，android页面常见问题及经验

    a:

    建议resize.css中将input,button,select,textarea等表单文件设为{-webkit-appearance: none;}，去掉html元素自带样式，便于用css控制元素。IOS下回默认将button按钮添加ios默认圆角及渐变色，可通过-webkit-appearance: none;重置并实现重写。

详细了解请参考：http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

    

    b:

    -webkit-tap-highlight-color

   当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可-----webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    c:

    在使用css3的圆角时，发现部分安卓机型（大部分出现在4.2.x版本下）出现border实现了圆角但background没有实现圆角的情况。在这种情况下其实只要再设置一个background-clip来进行裁剪就能解决问题了。

解决方法，在实现圆角的div上加上background-clip: padding-box;即可。

{
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

    d，

    css单行文字截取，截取select下option标签中的内容，在一些android设备上无效。

    e,

    支持CALC，使用时请注意防止被LESS预编译 
   width:~"-webkit-calc(100% - 100px)"; 
   margin: 0px 50px; 
    通过此方法可以很容易实现浮动元素居中，而不用去计算TOP LEFT 

  f，

    a标签的四个伪类link，visited，active，hover是专为click事件设计的，所以在触屏网站中尽量不要使用它们。

    如一定要使用，可通过touchstart，touchend模拟,但在页面滚动时，通过手指接触屏幕滑动来滚动屏幕，在触发touchmove时同样会因此就会触发touchstart与touchend，从而会引发前端显示BUG。

  g,

  通过Jquery Touch事件取代click；

  touchstart：触摸开始的时候触发
  touchmove：手指在屏幕上滑动的时候触发  
  touchend：触摸结束的时候触发 

  详细参考：http://blog.sina.com.cn/s/blog_97fd13ec01012k7e.html，http://www.jb51.net/html5/70096.html

  h，

 虚拟键盘与position:fixed

此bug请参考：http://www.th7.cn/web/html-css/201402/26140.shtml

 

其他问题待发现。