【转: 关于viewport的理解】的更多相关文章

转: 关于viewport的理解

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

移动端布局：视口viewport的理解

移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一点就是视口的缩放配置,牵扯出视口和像素等概念.目的是为让我们的CSS样式中逻辑像素匹配到手机终端的物理像素,让网页视图适合手机屏幕.虽然在代码中只是一个语句就解决的问题,但要理解它,要弄懂很多概念.<关于像素Pixel历史的详解看下一篇文档> 第二点就是rem单位的使用,目的是为了我们只需要一份代…

移动前端开发之viewport的理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览…

移动端开发viewport深入理解（转）

一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小.   在默认情况下,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewp…

viewport深入理解和使用

什么是viewport ? viewport是用户网页的可视区域,也可叫做视区.手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口比屏幕宽,这样就不用把网页挤到很小的窗口中,用户可以通过平移和缩放来看网页的不同部分. 下图为常见一些设备浏览器默认viewport宽度: css中的1px不等于设备的1px 在css中经常使用px做单位,PC端浏览器中的1px往往都是对应电脑屏幕的1个物理像素,这救我让我们误以为1px就是一个物理像素,事实并非如此,在不同设备不同环境下,…

可视化svg深入理解viewport、viewbox、preserveaspectradio

直接运行此例子 深入理解svg的viewport.viewbox.preserveaspectradio实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="李可"> <title>svgviewBox的特写过程.演示动画…

CSS之viewport 2

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

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

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

移动前端viewPort的那些事

1.viewport简单说 一般来说,移动上的viewport都是大于浏览器窗口的,不同的设备有自己默认的viewport值(980px或1024px). 2.三个viewport的理解(layout viewport.visual viewport.idea viewport) 上面说的,默认的viewport即layout viewport:DOM宽度,获取方式:document.documentElement.clientWidth/clientHeight visual viewport…

移动端适配之二：visual viewport、layout viewport和ideal viewport介绍

上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下,三个viewport主要是相对于移动端而言的. visual viewport 这个是浏览器给我们用的.能真正用来显示网页内容的区域,可以通过下面的js命令获取: window.innerWidth window.innerHeight 正如上篇博客所说的,前端里面能获取到的像素基本上都是CSS像素…