Mobile上的viewport及各种概念澄清贴

【Mobile上的viewport及各种概念澄清贴】的更多相关文章

Mobile上的viewport及各种概念澄清贴

device Pixel & CSS Pixel 物理像素指显示设备上的物理像素点,比如HTC G11宽是480px,这的480是用物理像素衡量的. CSS像素的话则指我们写页面时理解的那个像素单位.可以理解为是设备自己做了一层缩放,让2个物理像素代表一个我们css里说的像素,也就是dp(设备独立像素)的概念.行业内有个约定俗成的规范,即一般这个数值是320. 有的很高密度的手机略作了调整. 想知道设备的物理像素的话,一般去取 screen.width 就可以. 但苹果只会给你dp的数值,也就是…

11、使用 WinAppDeployCmd 部署appx 包到 Windows10 Mobile上（更新）

在 Windows10 Mobile开发工具里,微软没有提供 wp8 sdk 中 Application Deployment 一样的部署工具,参考了一下 StackOverflow 论坛上的帖子(link)和一个不知道什么语言的文章上的解图(link),大概尝试了一下,可以部署到 lumia950上. 前提条件,安装 win10 sdk(下载地址) ,phone 通过 usb 连接到 pc 端,并且phone 和 pc 网络连接到同一个路由器. 1.在 windows10 手机上,先打开…

dpr,ppi,dip,viewport的一些概念

一 ppi,dpr,dip,分辨率,屏幕尺寸,设备物理像素,设备独立像素分辨率:1920px*1080px 在这个设备上纵向上有 1920个像素点(色块)... 屏幕尺寸:5英寸(in) = 5*2.54(cm) 指的是在这个屏幕上对角线的长度使用英寸单位这个值是每个设备固定不变的像素密度ppi: ppi和dpi 指的是一个设备上每英寸长度上有多少个像素点 ppi = 对角线上的像素数量/尺寸设备像素比dpr: 指的是一个设备上的物理像素和独立像素的比值 dpr = 设备像素/设备独立…

清华大学《C++语言程序设计基础》线上课程笔记01---基础概念与一些注意事项

使用除法的注意事项 double b = 4.0 * 1/239.0; 因为整数相除结果取整,如果参数写1/239,结果就都是0 浮点数注意事项浮点数是近似存储,所以不能直接比较两个浮点数的大小, 可以比较差值小于10的多少负多少次方. 逗号运算符 a=3 * 5,a * 4; 先计算左边,后计算右边,结果返回右边,a=60. sizeof sizeof(类型名) sizeof 表达式计算所占字节数位操作 & :某些位置0 或者取出制定位; | :某些位置1; ^ :特定位翻转; <…

viewport ——视区概念，为自适应网页设计

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分.移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持. Viewport 基础一个常用的针对移动网页优化过的页面的 vie…

浅谈移动Web开发（上）：深入概念

PPI 什么是PPI PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样. 当我们在谈论显示设备的PPI时,它代指的屏幕的像素密度:当我们在谈论和图片相关时,我们谈论的是打印时的分辨率或者打印机的打印精度.这里我们主要描述的前一种情况. PPI全称为Pixel Per Inch,译为每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况. 如上图所示,在1英寸单位内面积内拥有的像素越多,密度越大,PPI值就越高.但像素密度的实际意义是什么?它表达的是…

CSS之viewport 2

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身. 移动浏览器的问题当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸.为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的:不管是对其进行缩放直到文字小得无法阅读,还是在…

两个viewport的故事（第二部分）

原文:http://www.quirksmode.org/mobile/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完全是一个新手的话,我建议你先读一下第一篇关于桌面浏览器的文章,先在熟悉的环境中进行下热身. 移动浏览器的问题当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸.为桌面浏览器所设计的网…

转: 关于viewport的理解

最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显示器小很多,比如iPhone也就是320px.那么那些网页在手机上如何浏览呢? 一种是把网页缩放到很小,你可以看到整个网页但是看不清字了:或者只看网页的一个局部,然后上下左右移动来看其他部分.现在的手机浏览器把两种模式结合使用.(或许还有第三种——分析网页,将其中内容抽取出来,重组,然后呈现,不过这…

【JAVAWEB学习笔记】07_BootStrap、Viewport介绍

今天主要学习了BootStrap,viewport的介绍和最后对网站进行了重构今天晨读单词: Compatible:兼容性 viewport:视口 device:设备 initial:初始化(缩写init) Template:模板 scale:缩放 container:容器 fluid:液体,流 navbar:导航条 icon:图标 dropdown:向下 separator:分割 group:组 current:当前 inverse:相反的 active:激活 default:默认的 ite…