移动端开发常见问题
viewport&单位
1
2
3
| px是相对单位 em相对于父元素的字体 rem相对于root
ppi=dpi x*x+y*y开方 /尺寸
dp=dip 是物理尺寸
|
viewport
1
2
3
4
5
6
| layoutviewport 布局viewport
initial-scale=1.0前提条件是width=device-width
user-scalable=no 不允许用户缩放s
maximum-scale=""
minimum-scale=""
window.innerWidth 逻辑宽度
|
忽略将页面中的数字识别为电话号码
1
| <meta name="format-detection" content="telephone=no"/>
|
忽略安卓平台对邮箱地址的知识
1
| <meta name="format-detection">
|
站添加到主屏幕快速启动方式，可隐藏地址栏，只针对于ios的safari
讲网站添加到主屏幕快速启动方式,只针对ios顶端状态条样式
移动端字体
ios系统 默认中文 冬青黑体简体中文 HeitiSC
英文 Helvetica
数字 HElveticaNeue
字体大小
局部的媒体查询业务字体使用px
iconfont
- iconfont.cn
- fontello.com
- icomoon.io/app/#/select
- font-awsome
- glyphicons.com
- ionicons.com
flexbox
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
项目属性
- order 排序 order越小越靠前
- flex-grow 如何分配剩余空间
- flex-shrink 空间变换是否收缩（无宽高）
默认1 空间不足将缩小 如果设置为0就不缩小
- flex-basis 定义项目是否参与剩余空间的分配
- flex 第一个参数是grow
- align-self 单独的排列方式
flex兼容性问题
高清图像
区分高分屏 DPR
样式区分1
2
3
4
5
| @media only screen and(-webkit-min-device-pixel-ratio:1){
}
background:-webkit-image-set(
url() 倍率)
|
通过js判断
window.devicePixelRatio
一像素边框
- 0.5px
- viewport+rem @media only screen and(-webkit-min-device-pixel-ratio:1){
}
或者改inital-scale 在html上加font-size: 图改成rem单位
- transform:scale(0.5)
- box-shadow 0.1 1 1 rgba(0,0,0,0.5)
- background-image
- 框架
doyou/yo
- 粘贴usage lib
- 框架入口Pages ->index app.scss放到page
- 保留reset
