viewport

本文大多数的内容基本都是从多篇博客或相关文章中进行筛选，提炼出来，原本我也想用我匮乏的语言来描述，但是发现别人已经总结的更好了，所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录： 基本概念 物理像素 设备独立像素 CSS 像素 PPI的概念 DPR的概念 缩放的概念 viewPort 的概念 viewport 渲染流程 Meta 标签说明 移动端布局实践 混合方式 REM 方式 响应式 JS自动换算 缩放方式 CSS3 缩放 viewport 缩放 相关补充 为什么需要meta标签？ 传统响应式布局与移动端响应式的区别 移动端字体以及大小的设置 移动端背景图缩放设置 使用Sass提高px与rem转换效率 通过Chrome进行真机调试 weinre 远程调试 移动端布局实践 混合方式 混合方式实现的移动端布局实际上就是对PC端布局技术的组合使用，它主要包含以下技术： 定位布局 浮动布局 可塑性布局 百分比布局 相对单位 将这些布局方法根据页面每个不同部分的特性进行组合使用，例如模态框，弹出层等可以采用定位方式，而页面元素的排版可以采用浮动布局，也可以使用具有可塑性的Flex布局方案，对于元素的尺寸可以采用百分比或者其它相对单位,而这便是我称之为“混合方式”的原因。 混合方式进行的移动端网页布局，所采用的技术通常都具有灵活、可伸缩、可塑等特点，甚至连使用的单位，最好都是相对单位

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备。 我相信各位童鞋应该和我一个样子，到处查找贴子，学习如何制作WebApp项目，经过我一番查找资料学习后准备分享给大家，希望和大家共同探讨学习WebApp。 那么WebApp与Native App的区别是什么? Native App： 缺点： 1、开发成本非常大，一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦，每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 优点： 1、非常酷 因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果 2、Native app是被Apple认可的 Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 开发成本较低 使用web开发技术就可以轻松的完成web app的开发 升级较简单 升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 维护比较轻松 和一般的web一样，维护比较简单，它其实就是一个站点

This post is related to an earlier post of wanting to learn how to properly render in between LIBGDX and Box2D. I had to understand viewport well before I could proceed. After much code/post readings, I felt the meaning of "viewport" was "the rectangle opening of a lens of the camera that views LIBGDX's Game world, where I can move it about the world to view what I want". But, after more reading, I seemed to be nowhere near the actual meaning. I've read the LIBGDX wiki, and read in the OpenGL documentation, which seem to explain viewport as being two different things. LIBGDX Wiki: "The

html5基本标签 声明文档使用的字符编码： <meta charset=“utf-8” /> 声明文档的兼容模式，优先使用最新版本 IE 和 Chrome <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> //指示IE以目前可用的最高模式显示内容 定义页面的最新版本： <meta name="revised" content="Frank, 2016/3/1" /> 页面描述 <meta name="description" content="不超过850个字符"/> 定义针对搜索引擎的关键词： <meta name="keywords" content="HTML5COL学院, HTML5, CSS3, JavaScript" /> 定义网页搜索引擎索引方式，使用英文逗号「,」分隔，常有如下几种取值：none,noindex,nofollow,all,index和follow： <meta name="robots" content="index,follow" /> 定义网页作者： <meta name="author" content="HTML5COL" /> 每 8 秒刷新一次页面： <meta http-equiv="refresh" content="8" /> 移动设备

I'm building an adaptive/responsive website. Regarding this recent change to the HTML5BP: " mobile/iOS css revisions " I've started using: <meta name="viewport" content="width=device-width"> ... and I have this in my CSS: html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } When initial-scale=1 was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1 and JS fix for viewport scale bug ). To summarize , when in landscape mode, this zooms the page: <meta name=

I want to disable Pinch and Zoom on Mobile devices. What configuration should I add to the viewport ? Link : http://play.mink7.com/n/dawn/ EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it. Add this into your for mobile devices. Then do your widths in percentages and you'll be fine: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> Add this in for devices that can't use viewport too: <meta name="HandheldFriendly" content="true" /> This is all I

:vsplit (short form: :vs ) split the Vim viewport vertically. :30vs splits the viewport, making the new window 30 characters wide. Once this 30 char window is created, how would one change it's size to 31 or 29? With horizontal windows Ctrl - W + increases the number of lines by one. What is the equivalent command to increase the columns by one? Herbert Sitz CTRL - W > and CTRL - W < to make the window wider or narrower. RusAlex And Ctr - W = will make them equal In case you need HORIZONTAL SPLIT resize as well: The command is the same for all splits, just the parameter changes: - + instead of

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。