移动应用开发常见问题
移动端常见浏览器
•手机端浏览器排行 https://rank.kkj.cn/mbrowserworld.shtml
•移动端浏览器有很多,熟知主流的有UC浏览器,QQ浏览器,百度手机浏览器,360浏览器,谷歌浏览器,猎豹浏览器,搜狗手机浏览器,欧朋浏览器,还有很多杂牌的浏览器。
•这些浏览器的内核,都是根据webkit改造来的,所以在兼容移动端主流浏览器,处理webkit内核浏览器就可以了,大部分都支持 css3 的所有语法
移动基础
•屏幕尺寸大全 https://uiiiuiii.com/screen/index.htm
•移动端主要是针对手机端开发
•移动端屏幕尺寸碎片化很严重,但是作为前端,我们制作页面按照iPhone678尺寸去做,不要去纠结dp,dpi,pt,ppt等单位,跟我们主要打交道是px,em,rem,%,vw,vh
视口(viewport)
定义:浏览器显示页面内容的屏幕区域,可以分为布局视口,视觉视口和理想视口
•布局视口:是网页布局的区域,也是 html 元素的父容器
•视觉视口:一个手机屏幕可以看到的所有区域,说白了就是手机屏幕大小
•布局视口和视觉视口,都是早期为了解决pc网页可以在手机上显示的需要。但是缺点也很明显,就是虽然网页可以显示在手机上,但是在手机里显示的网页元素很小,如果想要看全网页,需要手动放大一点点拖动查看。
•理想视口:在移动端不需要用户缩放和横向滚动条,就能正常查看网页的所有内容,在移动端显示的元素大小是合适的,比如文字,图片等
•理想视口实现方式,只需要添加视口标签告知浏览器即可
meta 视口标签
基本语法:
•这行代码意思:让布局视口与视觉视口宽度一致,说白了就是屏幕多大,画板就显示多大
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta:告诉网页的细节信息,名称/值成对出现
name:名称/值对里面的名称,自定义有语义化
content:名称/值对里面值,一串字符串,name的值对应
width=device-width:将页面的宽度设置为跟随设备的屏幕宽度
initial-scale=1.0:设置初始的缩放级别
uesr-scalable:是否允许用户进行缩放,0/no表示不容许,1/yes表示容许,
min-width,max-width 相当于用了user-scalable=no -->
</head>
属性 | 解释说明 |
---|---|
width | 宽度设置的是 viewport 宽度,可以设置 device-width 特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum | 最大缩放比,大于0的数字 |
minimum | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes 或 no (1 或 0) |
二倍图
•对于一张50*50图片,如果在手机上打开,该图片会按照相应的物理像素比放大倍数,进而会使图片失真
•解决原理:用倍数图来提高图片质量,在css中等倍数缩小图片,这样在视网膜屏设备中,再等倍数放大展示图片就不会失真。
•通常使用2倍图,也就是说拿到的设计稿一般都是2倍图,在书写css中图片尺寸都要等比缩小一半(适用于插入图片,也适用于背景图片)
背景图的缩放
background-size:可以指定背景图的大小
属性值可以为数字|百分比|cover|contain
属性 | 描述 |
---|---|
数字 | 设置固定像素展示图片,如果只有一个数,那么另一个是auto |
百分比 | 设置图片的父元素的百分比缩放图片宽高 |
cover | 通过拉伸图片达到完全覆盖整个容器,图片某部分可能显示不全面 |
contain | 依照图片的短边等比缩放展示,让图片完全显示在容器里 |
移动端开发选型
单独做移动端页面(主要) | 响应式页面兼容移动端 |
---|---|
流式布局(百分比) | 媒体查询 |
flex弹性布局 | bootstrap |
less+rem+媒体查询 |
注: 域名区分移动端 :网站域名前面加m前缀的,表示是通过移动设备比如手机打开,就会跳转移动端的页面
移动端特殊样式
-webkit-appearance: none; | 去除按钮输入框的默认样式 |
---|---|
-webkit-tap-highlight-color: transparent; | 去除超链接按下时默认的高亮效果(设为透明) |
-webkit-touch-callout: none; | 禁止长按页面时弹出菜单 |
-webkit-user-select: none; | 禁止文本被手动选择 |
<style>
button,input{
-webkit-appearance: none;
}
a{
-webkit-tap-highlight-color: transparent;
}
p{
-webkit-user-select: none;
}
</style>
<button>确认</button>
<input type="text">
<a href="#">我是a标签</a>
<p>我是p标签测试</p>
加上了私有前缀“-webkit-”,该前缀在WebKit和Blink内核的浏览器中有效,适用于Chrome浏览器和大多数移动端浏览器