移动应用开发常见问题

文章目录

移动应用开发常见问题
- 移动端常见浏览器
- 移动基础
- 视口（viewport）
- meta 视口标签
- 二倍图
- 移动端开发选型
- 移动端特殊样式

移动端常见浏览器

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

移动应用开发常见问题相关推荐

React.js 开发常见问题
React.js 开发常见问题我需要为 React.js 雇用专门的开发人员,还是说只要会 JavaScript 的员工就行? 如果你有了一支熟练的 JavaScript 开发团队,那么使用 Rea ...
【i.MX6UL/i.MX6ULL开发常见问题】单独编译内核,uboot生成很多文件,具体用哪一个？...
[i.MX6UL/i.MX6ULL开发常见问题]2.3单独编译内核,uboot生成很多文件,具体用哪一个? 答:内核编译出来的文件是~/MYiR-imx-Linux/arch/arm/boot/目录下 ...
ARKit从入门到精通（11）-ARKit开发常见问题及解决方案
转载请注明出处:ARKit从入门到精通(11)-ARKit开发常见问题及解决方案本文主要介绍ARKit开发过程中一些常见问题 1.ARKit框架无法导入问题 2.ARKit运行黑屏或者白屏问题:Un ...
ArcGIS Engine 10 开发常见问题的解决方法
ArcGIS Engine 10 开发常见问题的解决方法 You are not Licensed for 弹出提示框,点击确定,VS工程自动关闭 http://www.cnblogs.com/Ris ...
vue.js 前端开发常见问题
前端开发常见问题 1. 热部署失效解决办法:参考查看系统当前max_user_watches的值 $ cat /proc/sys/fs/inotify/max_user_watches 复制代码应 ...
HDFS二次开发常见问题
HDFS二次开发常见问题问题描述客户开发了一个HDFS应用,此应用存在多个线程,需同时往HDFS组件上写数据.在业务运行时,发现有业务线程和HDFS交互时,报如下异常: ...... Except ...
VueJS 开发常见问题集锦
VueJS 开发常见问题集锦框架浏览数:416 2017-8-3 由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用. 主要写一些官方手册上没有写 ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...
【Android】【TP】TP开发常见问题分析
TP开发常见问题&分析 1.TP重点关注范围以及checklist 先附录上TP的内部checklist,所有在列内容都为常见问题切比较严重问题,如下: 上下电时序 Operating Vol ...
Windows Mobile 开发常见问题集(转自zsu_darkwind的专栏)
Windows Mobile 开发常见问题集 1.Q:新建项目的时候选择哪个项目类型才能创建智能设备的应用程序? A:在Visual Studio的新建项目对话框中选择Visual C#或者Visua ...

移动应用开发常见问题

移动应用开发常见问题

文章目录

移动端常见浏览器

移动基础

视口（viewport）

meta 视口标签

二倍图

移动端开发选型

移动端特殊样式

移动应用开发常见问题相关推荐

最新文章

热门文章