viewport

移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。 在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例

开发HTML5游戏中，我们常用的一些mata标签: < meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 　 width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ） height: viewport 的高度 （范围从 223 到 10,000 ） initial-scale: 初始的缩放比例 （范围从>0到 10 ） minimum-scale: 允许用户缩放到的最小比例 maximum-scale: 允许用户缩放到的最大比例 user-scalable: 用户是否可以手动缩放 下面是我们经常用到的一些标签，由于浏览器的差异，并不能百分百兼容。 <!-- 是否删除默认的苹果工具栏和菜单栏 --> < meta name = "apple-mobile-web-app-capable" content = "yes" /> <!-- 其他的meta设置 --> <!-- 启用360浏览器的极速模式(webkit) --> < meta name = "renderer" content = "webkit" > <!-- 避免IE使用兼容模式 --> < meta http

Ok, I'm trying to get a div to scale and the height is always the height of the viewport. I'm going to link to my examples as it needs some explaining. www.madmediablitz.com/tv/precentdemo.html The link above is the closest I've come to a solution and I'm hoping that someone here will find it simple to fix. What I want to happen is the tv to always be the height of the viewport (to a degree, min-height:~400px; max-height:~700px;). The code that I used there is based on http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ . www.madmediablitz.com/tv/precentdemo_alt.html This

1. 视口：(布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)) 　meta 视口标签 <meta name = "viewport" content = “ width = device-width，user-scalable = no，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0” 　width：宽度设置的是 viewport 宽度，可以设置 device-width(设备宽度)特殊值 　user-scalable：用户是否可以缩放，yes 或者 no（1 或者 0） 　initial-scale：初始缩放比，大于 0 的数字 　maximum-scale：最大缩放比，大于 0 的数字 　minimum-scale：最小缩放比，大于 0 的数字 　标准的 viewport 设置 　　视口宽度和设备保持一致 　　视口的默认缩放比例1.0 　　不允许用户自行缩放 　　最大允许的缩放比例1.0 　　最小允许的缩放比例1.0 2. 物理像素 & 物理像素比 　物理像素点指的是屏幕显示的最小颗粒（也就是我们说的分辨率），是物理真实存在的，这是厂商在出厂时就设置好的，比如苹果6/7/8 是750*1334 　开发时的 1px 不一定等于

在网页的 head 之中添加 viewport meta 标签，如下所示： <meta name="viewport" content="width=device-width, initial-scale=1.0"> width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。 通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 　　 来源： https://www.cnblogs.com/fanmiaolan/p/11759050.html

【来源地址】 http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html http://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/ http://java-mans.iteye.com/blog/1639503 http://www.zhangxinxu.com/wordpress/?p=2568 一、 移动WebApp简单介绍 WebApp 简介 Web app是一种通过网络（如互联网或内联网）访问的应用程序；也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言（如JavaScript）并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。 WebApp的优点 ◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤； ◆浏览器应用程序几乎不需要客户端上的磁盘空间； ◆新功能从服务器自动传递给用户，用户自己不必升级程序； ◆可以轻松整合进入其他服务类web程序； ◆跨平台的兼容性

I have a website that needs to use 0.3 value for viewport on iphone, but 0.7 for ipad. Is there a way to set viewport for only iphone or ipad? Ross Here is one solution... <!-- in head --> <meta id="viewport" name='viewport'> <script> (function(doc) { var viewport = document.getElementById('viewport'); if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { viewport.setAttribute("content", "initial-scale=0.3"); } else if ( navigator.userAgent.match(/iPad/i) ) { viewport.setAttribute("content", "initial-scale=0.7"); } }(document)); </script> I found a simple way with

In a web application that I am working on, I tried out iOS 7.1's new minimal-ui feature (see safari fullscreen in iOS 7.1 with minimal-ui meta tag ), but I am seeing an issue where an 84px-high gray area appears at the bottom when I switch from portrait to landscape. Also, document.body.scrollTop changes to 64 after switching to landscape. You can see the issue using this "Hello World" web app : http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html When I load the app in Mobile Safari on iOS 7.1 iPhone Retina Simulator, everything is fine in portrait mode. However,

I have three div elements: one as a header, one as a footer, and a center content div . the div in the center needs to expand automatically with content, but I would like a min-height such that the bottom div always at least reaches the bottom of the window, but is not fixed there on longer pages. For example: <div id="a" style="height: 200px;"> <p>This div should always remain at the top of the page content and should scroll with it.</p> </div> <div id="b"> <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the

I've been trying to make this work for days now, with no luck, so I thought I'd share info and maybe someone comes up with a solution. I want to get the exact viewport size when the soft keyboard is up. I am currently using the following code on the header in order for the site to be responsive: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> What I realized is that when the soft keyboard comes up, it uses the device height as the viewport height and pushes the rest of the site upwards - which makes me assume that it's getting it's