移动端开发初识

对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!

对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!

  • 设备独立像素:

   就是屏幕的尺寸,屏幕大小(这个可以叫做点,是一个单位),可以改变(缩放可以改变)

window.innerWidth/window.innerHeight
  • 设备像素(物理像素)    设备的分辨率(实际像素值),就是购买的设备如手机售货员告诉你手机多少像素

            这个值是虚拟的,无法获取            控制最小像素显示点

  •  像素比(DPR这个值无法修改)

   缩放比例=设备像素/设备独立像素

window.devicePixelRatio(获取设备像素比dpr)

设备独立像素代表设备的一个点,一个点有包含多个像素点(包含多少个由设备dpr决定)!

逻辑像素

CSS像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素。如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px。因此,需要使用大约4个物理像素来显示一个CSS像素.

在实际开发中图片一般以750px为例,而我们是iphone6的设备独立像素是375px,750px的物理像素怎么得来的,由于inphone6的像素比2,所以独立设备像素*像素比得到物理像素750px,为了保持各个设备显示小一致!

上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签

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

wdith=device-width宽度等于设备宽度,initial-scale=1初始化的设备缩放比例(1表示不缩放,2表示200%扩大,相当于扩大了设备独立像素,)所有整体的物理像素改变,缩放倍数2,实际独立像素要除以2而不是乘上这个scale,所有在scale=1上面的图像,小于在scale=2的图像!物理近大远小成像特点,在小的尺寸上面显示更大些!

minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置

移动端开发的meta标签一般只需要一下的属性就行

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

我们不喜欢用户进行缩放,直接我们在开发过程中,转换成对应的物理像素能较好的观察哦设备的显示效果!因此无需放大!进行缩放

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天P图攻城狮

iOS多边形马赛克的实现(下)

上一篇里我们详述了多边形马赛克的实现步骤,末尾提出了一个思考:如何在涂抹时让马赛克逐块显示呢? 再回顾一下多边形马赛克的实现。首先进行图片预处理,将原图转成bi...

430130
来自专栏Young Dreamer

针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

  最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr...

30950
来自专栏大数据钻研

canvas图形绘制之星空、噪点与烟雾效果

一、三合一 三个效果合成一篇文章。 有多个小伙伴问我,为何不开个公众号,现在都是移动时代,你博客文章写好后,公众号再复制一份,花不了多长时间,同时传播方便迅速,...

36440
来自专栏Material Design组件

Human Interface Guidelines — Sliders

10120
来自专栏逍遥剑客的游戏开发

简单的运动模糊效果实现

19740
来自专栏数据小魔方

sparklines迷你图系列12——Composition(Pie)

今天分享sparklines迷你图系列13——Composition(Pie)。 大家看到名字就肯定知道是饼图了。借助sparklines迷你图工具,我们可以通...

28170
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

48620
来自专栏企鹅号快讯

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 ? Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas....

25170
来自专栏葡萄城控件技术团队

位图和SVG用法比较

位图,亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单...

28960
来自专栏宋凯伦的技术小栈

Android - 开发页面需了解的dip,sp,px知识,以及它们的转换

工作中,时常会有任务要求开发新页面,这时一般的流程是产品经理确定要开发的页面和功能,然后设计师提供设计稿,之后由我们开发人员完成开发工作。 通常,设计师提供的设...

22080

扫码关注云+社区

领取腾讯云代金券