移动端(一)—— 移动端概念
移动端相关概念
之前一直在用github博客,但是发现上传图片和在别人访问的问题上很不友好,所以现在改用csdn博客,下面正文。
个人现在在研究移动端,但是对于移动端的相关概念等等,原理性问题一直不了解,然后研究了几天,先来说说移动端概念上的东西。
1.1 移动端(wap)与pc端有以下三个特点:
- 系统
pc:windows/mac(区别不大)
移动端:ios/android/windows(有区别) - 浏览器
pc:区别很大
移动端:区别不大 - 分辨率(尺寸)
pc:有区别
移动端:区别很大
1.2 Tips:手机如何访问电脑的页面
- 打开cmd,输入ipconfig回车。
- 找到ipv4的地址,复制。
- 在hbuilder里面用浏览器打开你的网页。
- 用刚才的IPV4的地址替换掉打开网页的地址的前面的ip地址。
- 复制第四步的新地址,通过二维码生成器生成网址二维码,手机扫码访问。
1.3 像素的相关概念
- 设备独立像素(逻辑像素,就是在控制台手机显示上面显示的像素)与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素
屏幕的大小,屏幕的尺寸(别名叫点,是个单位);
获取:window.screen.width/window.screen.height
注意:- 横竖屏切换的时候,真机里的这个值不会变,但在模拟器里是会切换的
- 在一个点里,可以放下多个像素
- 这个值是可以被改变的(通过后面讲的缩放)
设备像素(物理像素)设备能控制显示的最小单位,我们常说的1920×1080像素分辨率就是用的设备像素单位
屏幕分辨率(实际放的像素值),买手机的时候厂家告诉你的分辨率
这个值是虚拟的,无法获取CSS像素(CSS Pixel):适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在
像素比(DPR,这个值无法修改)
缩放的比例=设备像素/设备独立像素
获取:window.devicePixelRatio
例如:iphone6
375*667 设备独立像素,屏幕尺寸
750*1334 设备像素,屏幕分辨率
2 像素比https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
- PPI(像素密度,每英寸所拥有的像素数) PPI越大,越清晰,PPI在320以上为高密度,是高清屏,retina显示屏。计算公示:
PPI = (√(横向pixel)^2+(纵向pixel)^2)/屏幕尺寸
iphone6:(分辨率为1080*1920,屏幕尺寸为5.2英寸)
PPI = (√1920^2+1080^2)/5.2
1.4 viewport
视口(可视区窗口),通过meta标签设置,这个必须设置,才能会告诉浏览器是移动端,否则浏览器还会按照正常的宽度一般(980)显示
- 没有设置viewpoint的表现
- 屏幕的宽度一般为980,但不同的型号也会不同
- 真机与模拟器的值也会不同
- 用window.innerWidth/window.innerHeight方法获取
参数设置:
content 视口里的相关设置- width: 屏幕的宽度,一般取值为device-width(默认值),即设备的实际宽度。不建议设置为数字
- user-scalable:是否允许缩放,yes or no
//一般来说只设置上面就行了,设置下面更完整,可以防止第三方软件将文字等缩放
- initial-scale:初始比例
- minimum-scale:最小能够缩放的比例
- maximum-scale:最大能够缩放的比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 注意:
- 如果允许缩放,就把width与user-scalable去掉
- 用了缩放后,并不是真正的缩放了,而是改变了屏幕的尺寸(设备独立像素)。
1.5 像素比
viewport里的宽度设置成device-width后
宽度不变,像素会变化
宽度是多少在移动端页面与pc端页面里是一致的,不会变化。但是像素会变化,一个像素会变成多个像素显示,变成的数量由像素比决定设计图要根据设备像素(屏幕分辨率)去定大小,至少宽度要在750以上(一般会以750的宽为基准),所以一般我们代码设置的样式是我们的逻辑像素,要根据设计稿的尺寸按dpr的比例进行调整。
- 对于像素比为2以上的话,图片的尺寸是两倍,正好能够显示高清,但是对于像素比是1的话,图片的体积就过大了,会浪费很多流量,并且图片会自动压缩,效果还是会有一点差别(适配解决),例如750px的图片,在iphone6(375*667)上会显示高清,因为dpr为2,一个像素点里面容纳两个像素,而375个像素点就有750个像素,750px的图片正好对应,而375px的图片是750px的一半,也就是它要取图片的近似色来填充多出来的像素,就使得图片变模糊。
移动端(一)—— 移动端概念相关推荐
- 【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录 一.移动端浏览器 二.移动端屏幕分辨率 三.移动端网页调试方法 一.移动端浏览器 移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
- 游戏服务端开发之基础概念扫盲篇
13年毕业后,做了一年多外包web开发,因为受不了在客户现场工作的氛围,愤然辞职.转行做了一名手游服务端开发. 在广州,据我所知,选择java作为服务端开发语言的公司大概有37互娱,百田,银汉,易娱, ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言 大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 聊天系统:服务端 + 客户端 + web端
为什么先看最终效果?因为此刻代码已经撸完了.更重要的是我们带着感官的目标去进行后续的分析,可以更好地理解.标题中提到了,整个工程包含三个部分: 1.聊天服务器 聊天服务器的职责一句话解释:负责接收所有 ...
- 5G推动下,XR的需求“爆发”会来自B端还是C端?...
几年前的VR热潮给不少普通消费者留下了深刻的印象,VR.AR.MR的概念同时得到了普及,但因为屏幕画质.显示延迟,头显佩戴舒适度等问题未被很好地解决,消费者对VR的关注度也逐步降低.2019年,5G将 ...
- 5G推动下,XR的需求“爆发”会来自B端还是C端?
几年前的VR热潮给不少普通消费者留下了深刻的印象,VR.AR.MR的概念同时得到了普及,但因为屏幕画质.显示延迟,头显佩戴舒适度等问题未被很好地解决,消费者对VR的关注度也逐步降低.2019年,5G将 ...
- 基于java的一款实时聊天系统,包含服务端 + 客户端 + web端
最终效果 为什么先看最终效果?因为此刻代码已经撸完了.更重要的是我们带着感官的目标去进行后续的分析,可以更好地理解.标题中提到了,整个工程包含三个部分: 1.聊天服务器 聊天服务器的职责一句话解释:负 ...
- 聊一聊B端和C端产品的区别
聊一聊B端和C端产品的区别 写在前面的话: to B的产品经理和 to C 的产品经理有何差别?难道仅仅只是使用对象不一样?做产品经理这么久你是否思考过这个问题? 作为一名交互设计师,自己也设计过2b ...
最新文章
- angular轮播图
- ArcGIS 10 五大飞跃
- linux find命令格式及find命令详解
- 净水器怎么放_今日头条 | 如何清洗净水器的陶瓷滤芯,要不要来学一下!
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
- 都说 VR 开发坑太多,结果华为云 5G Cloud VR 放了个大招儿!
- 0322Private strand flush not complete
- 直观讲解Matlab的im2col函数
- 最全最简单的dubbo教程-开篇《一》
- Hadoop配置环境变量(详解版)
- 普元EOS在运算逻辑里面调用HttpServletRequest ,HttpServletResponse
- linux安装惠普RGS软件,惠普RGS初印象
- Origin科研绘图实战
- 2023宁波大学计算机考研信息汇总
- 企业用企业邮箱的好处是什么?企业邮箱支持哪些功能?
- html5 倒计时跳转动画,HTML5弹性摇摆旋转的倒计时动画
- C++设计模式——访问者模式
- ES6最通俗易懂的超重点保姆级笔记!女朋友看了都流泪的学习秘籍!没有一句废话,全部都是满满干货!
- SylixOS x86 HPET 定时器驱动
- 2018北京小学生信息学科普竞赛试题点评