webapp填坑记录[更新中]

标签：布局   添加   iphone   target   com   apt   and   记录   type   

网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题:

• meta 头部声明
  在开发的时候,刚刚创建 HTML 文件,再使用浏览器的手机模式是没有手机上的效果的,所以要在头部添加:
  

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

  这一串代码,就会模拟出手机的效果,并且还有其他好处:

  width=device-width ：表示宽度是设备屏幕的宽度
  initial-scale=1.0：表示初始的缩放比例 
  user-scalable=no：表示用户是否可以调整缩放比例
  minimum-scale=1：表示最小的缩放比例 
  maximum-scale=1：表示最大的缩放比例 

  
  
  

• css 宽度使用 rem
  这个网上有很多源码可以使用,加载一下不超时10多 k 的大小吧,简单好用,好处就是比如0.5rem大小的字体可以根据手机屏幕的大小自动缩放,不过有一些也可以不用,可以用 px 来代替,比如: border,background-size等等,还有宽度,高度,也尽量用百分比来控制会好点;
  
  
  
• 页面布局 flex
  尽量采用 flex 布局,关于上下,左右居中都十分方便,这里给出我之前写过的一片博客关于 flex 布局的 http://www.cnblogs.com/Grewer/p/7618096.html
  还有最重要的一点就是在 flex 布局里,如果最大的节点高度设为100%的话,要注意手机软键盘的问题,点开软键盘可能会让元素发生缩放,这个时候可以使用flex-shrink:0
  使用 flex 布局,最好定义一个全局变量,比如 .flex{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}然后再其他页面加上 flex的 class 就可以方便的使用;
  
  
  
• 表单提交
  在 webapp 里表单提交的体验很差,可能 h5的 api 没有什么好的支持,比如在填写账号和密码的时候,我刚填写完账号,软键盘的右下角是确定或者确认的字样,很奇怪;虽然可以监听回车键的动作,调到密码栏里,但是对于这我还是有强迫症的,然而我也并没有什么好的方法解决;
  在一个就是填写账号密码,在填写完密码后,右下角也还是和上面一样,并没有什么改变,不过这个可以用添加 form 表单的方法解决,详情请自行搜索;
  还有就是能全部填写数字的时候 input 的 type尽量写 number 这样软键盘打开的时候是数字键盘,比 text 体验会好很多;
  再就是上传图片的问题,尽管只需要添加一个 input type="file" 的标签就行了,但是任然没有 api 可以自由选择照片的来源是照相机还是相册,我在网上搜索的时候,发现他们说是capture=“camera”这个可以解决,但是我亲身测验我的 iPhone 和 Android 都没有效果,和没有加一样;
  
  
  
• iPhone 自带的a标签特效
  不知道你们有没有这个,反正我这儿是有的,就是原来是淡灰色的下划线,点击或者刷新任何页面后,再进去此页面,下划线颜色会变得更深,感觉又细了很多,这是 iPhone 的自带效果
  可以同过全局或局部的 a 标签的定义来解决,如像我这样a:link {color: #d9d9d9}a:visited {color: #d9d9d9}即可
  
  
• border
  border 的宽度问题,很多人想用宽度为0.5px 宽度来设置 border, 但是因为手机型号的问题会让有的能正常显示,而又的无法显示,这个可以使用我这样的方式来设置

  .item:after {
          border-bottom: 1px dashed #888;
          content: "";
          display: block;
          width:100%;
          -webkit-transform: scale(1, 0.5);
          transform: scale(1, 0.5);
      }

  
  
  待更新 loading...

webapp填坑记录[更新中]

标签：布局   添加   iphone   target   com   apt   and   记录   type   

原文地址：http://www.cnblogs.com/Grewer/p/7819776.html