十分钟带你深入了解什么是移动端？

目标

能够知道移动web的开发现状
能够写出标准的viewport 视口
能够使用移动web的调试方法
能够说出移动端常见的布局方案
能够描述流式布局
能够独立完成移动端页面

1.移动端基础

浏览器现状
pc端常见浏览器
360,谷歌,火狐,qq,百度,搜狗,IE
移动端常见浏览器
uc,qq,欧朋,百度手机,360安全,谷歌,搜狗手机,猎豹
国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过了的内核,
国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android
修改开发的一样
总结: 兼容移动端主流浏览器,处理Webkit内核浏览器即可.
手机屏幕现状
移动端设备屏幕尺寸非常多,碎片化严重
Android Q设备有多种分辨率:
480x800,480x854,540x960,720x1280,1080x1920等,还有2k,4k屏
常见移动端屏幕尺寸

移动端调试方法
Chrome(谷歌浏览器)的模拟手机调试

 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器使用外网服务器,直接IP或域名访问

总结
移动端浏览器我们主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一

2.视口

视口(viewport)就是浏览器显示页面内容的屏幕区域

视口可分为

布局视口 layout viewport
一般移动端设备的浏览器都默认设置了一个布局视口,用于解决早期的pc端也页面在手机上显示的问题 ios,Android Q基本都将这个视口分辨率设置为980px,所以pc上的网页
大多数都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页
视觉视口 visual viewport
字面意思,它是用户正在看到的网站的区域.注意是网站的区域我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍然保持原来的宽度
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口,对设备来讲,是最理想的视口尺寸需要手动填写meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽,我们布局的视口就多宽
总结
视口就是浏览器显示页面内容的屏幕区域视口分为布局视口,视觉视口,和理想视口我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽

想要理想视口,我们需要给我们的移动端页面添加meta视口标签

meta视口标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">

属性

3.二倍图

物理像素和物理像素比
物理像素点值的是屏幕显示的最小颗粒,是物理真实存在的,这是厂商在出厂时就设置好了,比如苹果6/7/8是750*1334
我们开发时候的1px不是一定等于一个物理像素的
pc端页面,1个px通常情况等于1个物理像素的,但是移动端就不尽相同
一个px能显示的物理像素点的个数,称为物理像素比或屏幕像素比
```
 pc端和早期的手机屏幕/普通手机屏幕:1px像素 = 1物理像素
```

Retina(视网膜屏幕)是一种显示技术,可以把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度

2. 多倍图
对于一张50px * 50px的图片,在手机Retina屏中打开,按照物理像素比会放大倍数,这样会造成图片模糊
在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
通常使用二倍图,因为iPhone6/7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
背景图片注意缩放问题
3. 背景缩放 background-size
单位: 长度|百分比|cover|contain
conver把背景图扩展至足够大,以使背景图像完全覆盖背景区域
contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

4.移动端开发选择

移动端主流方案
单独制作移动端页面(主流)
如
m.jd.com 京东
淘宝触屏版
通常情况下,网址域名前面加m(mobile)可以打开移动端,通过判断设备,如果是移动端设备打开,则跳到移动端页面
响应式页面兼容移动端(其次)
https://www.uisdc.com/tag/
缺点: 制作麻烦,需要花很大精力去调兼容性问题

5.移动端技术解决方案

移动端浏览器
移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题
我们可以放心使用H5标签和css3样式
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
css初始化 normalize.css
移动端css初始化推荐使用normalize.css
好处
保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档
网址 : http://necolas.github.io/normalize.css/
css3 盒子模型 box-sizing
box-sizing:border-box
padding和border不会在撑大盒子了
默认值
box-sizing:content-box
padding和border和原来一样会在撑大盒子

十分钟带你深入了解什么是移动端？相关推荐

十分钟带你理解Kubernetes核心概念
原文地址:http://www.dockone.io/article/932 十分钟带你理解Kubernetes核心概念本文将会简单介绍Kubernetes的核心概念.因为这些定义可以在Kubern ...
十分钟带你打造unity3d第一人称射击
那抱歉,上次那个Unity+kinect还没有更新,最近在深一步研究,不久将更新(绝对不负众望)!现在进入正题,十分钟带你打造unity3D第一人称射击游戏! 看完本篇博客,你将学会第一人称控制,粒子 ...
简单易懂！十分钟带你了解：统计学到底是干什么的
CDA数据分析师出品编译:Mika [导读] 统计学在我们的日常生活中无处不在,它有助于我们更好地了解世界,并做出更好的决策. 在今天的内容里,我们将带你用十分钟了解:统计学到底是关于什么的一门学 ...
这是我见过最好的Python教程：十分钟带你认识Python
这篇文章主要介绍了简洁的十分钟Python入门教程,Python语言本身的简洁也使得网络上各种Python快门入门教程有着很高的人气,本文是国内此类其中的一篇,需要的朋友可以参考下 [简介] Pyth ...
移动端视频开发通过什么方式实现直播？十分钟带你快速了解
原文链接:https://www.jianshu.com/p/92b71382724f 本专栏专注分享大型Bat面试知识,后续会持续更新,喜欢的话麻烦点击一个关注现在的移动端的音视频这些在近段时间非 ...
依赖 netty spring_十分钟带你了解Spring的七大知识点，程序员必了解
Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶.它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflo ...
[k8s] 第一章十分钟带你理解Kubernetes核心概念
本章节主要介绍应用程序在服务器上部署方式演变以及kubernetes的概念.组件和工作原理. 应用部署方式演变在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署 ...
给我十分钟带你过完java多线程所有基础知识
目录: 1.并发并行与线程进程 2.认识CPU和主线程 3.多线程的三种创建方式 4.三种创建多线程方式的进一步探究和对比 5.匿名内部类的多线程创建 6.多线程内存的分析 7.深度了解线程run() ...
基于昇腾CANN的卡通图像生成可在线体验啦！十分钟带你了解CANN应用开发全流程
摘要:CANN作为昇腾AI处理器的发动机,支持业界多种主流的AI框架,包括MindSpore.TensorFlow.Pytorch.Caffe等,并提供1200多个基础算子. 2021年7月8日,第四 ...

十分钟带你深入了解什么是移动端？

十分钟带你深入了解什么是移动端？相关推荐

最新文章

热门文章