移动应用开发常见问题

idiot_MAN

已于 2022-08-09 21:34:44 修改

阅读量189

点赞数

分类专栏：前端文章标签： css 前端

于 2022-07-04 00:11:04 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/125591887

版权

前端专栏收录该内容

67 篇文章 2 订阅

订阅专栏

移动应用开发常见问题

文章目录

- 移动应用开发常见问题

移动端常见浏览器

•手机端浏览器排行 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浏览器和大多数移动端浏览器