前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为 ...

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable ...

我们通常在写移动端页面时，往往都会在html页面中加入这样一段话 可能我们只知道这三个字段的含义（视口宽度等于设备宽度，屏幕缩放为1，禁止用户缩放），但是为什么要这么写，其原理又是什么呢？ 我们先看一个简单的demo吧。 该demo展示一个宽度为320px的div ...

做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容: Viewport属性详解 Viewport:字面意思为视图 ...

一、px与视口 1.像素：一个像素表示了计算机屏幕所能显示的最小区域，分为css像素（css中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关） 2.视口--理想视口（理想的布局视口、在移动设备中指设备的分辨率===>给定设备物理像素的情况下，最佳的布局视口）1css 像素 ...

一个网页，在电脑端和pc端，设置同样的像素，为什么显示的大小不同？ 先直接回答一下这个问题，再讲一下相关的概念； 移动端对这个页面进行了缩放，这是浏览器帮我们做的，虽然没有设置 meta 标签，没有设置initial-scale(缩放值） 　　浏览器默认，对于移动 ...

一般，自适应移动端加这个语句即可 <meta name="viewport" content="width=device-width">但是，不知道为什么加了这个语句还是没用，查了查可能跟下面这几个元素有关系，所以可以尝试这样子加： <script> var ...

前面的话 　　在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual ...