移动端适配:像素与视口

相关概念设备像素/硬件像素/物理像素设备像素,也称为硬件像素、物理像素,是显示屏上能够显示颜色的最小的单位,由一组物理灯(每组包括红、绿、蓝三种颜色的灯)构成,通过在不同光强下打开或关闭这些灯,可以产生任意数量的颜色和亮度。 设备的物理像素数是固定的,是厂商在出厂时就设置好了的 —— 即一个设备的(物理)分辨率是固定的。比如iPhone5的(物理)分辨率为640x1136,则设备像素数为640x1136。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 09, 2017

响应式设计工作原理

本文根据 Gustav Jorlöv 的 What makes responsive design work 翻译,无法保证译文完全正确。 在这篇简短的介绍中,我想让你了解一下使响应式web设计成为可能的机制。我不是要深究一些不必要的细节,而是在web开发人员能受益的程度下解释概念。我还想提一下,不同浏览器行为不同,特别是在Android的自由领域里,但是这篇短文不会涉及如何处理浏览器兼容性问题,因为那本身是一个完整的故事。     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 02, 2017

理解视口

本文根据 Earle Castledine, Myles Eftos, and Max Wheeler 的 Understanding the Viewport 翻译,无法保证译文完全正确。 移动开发时,必须了解视口。在桌面端,视口是一个清晰的概念:它是浏览器窗口中的可视区域。在移动设备上则比较复杂,因为屏幕通常比浏览器窗口小。 在     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 02, 2017

虚拟视口

本文根据 Matt Gaunt 的 What the Virtual Viewport? 翻译,无法保证译文完全正确。 Chrome M40对viewport做了一个非常微妙的更改,但对用户来说应该有很大的不同。 移动浏览器启动时,缺少viewport元标签意味着浏览器会让网页认为它有大约980px的屏幕空间,并以这个大小呈现。如果使用viewport元标签,则开发人员可以定义宽度,通常定义为device-width设备宽度,这会将屏幕大小设置为设备大小。可以在     阅读全文
Miaoxingren's avatar
Miaoxingren 6月 01, 2017