[转]移动端Web开发小记
来源:互联网 发布:js怎么在元素创建属性 编辑:程序博客网 时间:2024/05/22 02:15
原文地址:http://www.daqianduan.com/4441.html
不再考虑浏览器兼容性
移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点。
当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好。
所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的。
丰富的页面Meta
控制显示区域各种属性:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
- width – viewport的宽度
- height – viewport的高度
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
IOS中Safari允许全屏浏览:
<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari顶端状态条样式:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略将数字变为电话号码:
<meta content="telephone=no" name="format-detection">
一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!
IOS中Safari设置保存到桌面图标:
这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
强大的CSS属性box-flex
之所以将这块作为大栏目来讲,是因为这个属性非常有用,和之前开发win8 app时的grid非常相似。
box-flex的作用是按百分比划分兄弟相同标签的width,也就是当ul里有个两个li时,每个li会自动划分ul的宽度,如果box-flex:1;那么此时,li的width就是50%
box-flex用法实例1:
<ul> <li>11111</li> <li>2222222</li> <li>333333333</li></ul>
ul{display: -webkit-box;}ul li{-webkit-box-flex: 1;}
显示结果(需用webkit核浏览器查看,如Chrome,下同):
点此查看实例展示
box-flex用法实例2:
<div class="demo02"><input placeholder="百分百宽度输入框" type="text"></div>
<style type="text/css">.demo02{display: -webkit-box;}.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}</style>
点此查看实例展示
0 0
- [转]移动端Web开发小记
- html5移动web开发小记
- 移动开发小记-01
- 移动端Web开发
- 移动端--web开发
- 移动端Web开发
- 移动端web开发
- 移动端web开发
- web端测试和移动端测试的区别小记
- 移动前端开发WebApp小记
- web移动端开发(1)
- 移动端web开发坑
- 移动端web开发技巧
- 移动端web开发技巧
- 移动端web开发技巧
- 移动端web开发技巧
- 移动端web开发技巧
- 移动端web开发技巧
- block没那么难(一)
- PAT (Basic Level) Practise (中文)1006. 换个格式输出整数 (15) C语言
- 磁盘管理
- mysql 添加 删除字段
- offsetTop clientX pageX screenX scrollTop之间的区别以及代码实现
- [转]移动端Web开发小记
- 用分析函数row_number(),rank(),dense_rank()求每个部门的工资前三名
- 制作数据地图:没有想象中的那么难!
- 归档、解归档
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十七讲:apache服务器介绍
- MTK相机内核驱动缺陷导致的权限提升,poc原理分析
- Toast要注意的地方
- PAT (Basic Level) Practise (中文)1007. 素数对猜想 (20) C语言
- 常见问题总结