【移动开发viewport】的更多相关文章

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

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

移动开发viewport

三种 viewport layout viewport:文档流的 css 宽度,是一个静态的值,使用 document.documentElement.clientWidth 获取,在meta中是 width 设置的值 visual viewport:当前可视区的显示的 css 宽度,为文档流现在在屏幕可视区显示出来的宽度,可以使用 window.innerWidth 来获取 ideal viewport:移动设备的理想viewport,不同的设备拥有有不同的ideal viewport.所有的…

移动wabAPP 开发 viewport 注意事项

我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> http://wenzhixin.net.cn/2014/08/01/viewport_mobile ----游戏UI编辑器设计的UI宽度都是固定的h…

移动端开发-viewport与媒体查询

首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @media . @media(媒体查询)是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计.示例代码如下: @media screen and (min-width: 960px) { body { background-color: blue; } } @media screen a…

移动开发--viewport

手机浏览器默认做了2件事情: 一.页面渲染在一个980px(ios,安卓可能有640px或1000多不等)的viewport. 二.缩放 为什么渲染时,要有viewport? 为了排版正确(980px的viewport),再进行缩放就能看的正确. 不用980px的排版: font-size为40px等于pc上12px同等物理大小,不规范. 1.window对象有一个devicePixelRatio属性, 它的官方的定义为:设备物理像素和设备独立像素的比例 dpr,也就是 devicePixelR…

移动前端开发viewport

1.viewport的概念 能在移动设备上正常显示那些传统的为桌面浏览器设计的网站宽度 2.css中的1px并不等于移动设备的1px 在iphone3上,一个css像素确实是等于一个屏幕物理像素的.后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的. 设备物理像素和设备独立像素的比例,也就是 d…

移动端开发-viewport

1.viewport viewport 即设备 屏幕上显示网页的区域.因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px 宽或者是其他值(不同的设备可能不一样),但带来的后果就是当网页过宽浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小. 2.像素和物理像素 说到像素和物理像素,就得说一下DPR(devicePixelRatio) 这个词了,DPR表示屏幕 “显示像素” 与 “…

移动端下网页border：1px显示

解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewport的深入理解>> 步入正题直接上代码解决border:1px的解决办法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="view…

HTML5开发手机应用--viewport的作用

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp…

Viewport Resizer下载 谷歌前端自适应开发工具

原文链接:http://www.phpbiji.cn/article/index/id/107/cid/6.html Viewport Resizer下载 谷歌前端自适应开发工具 在前端开发过程中,随着移动端手持设备的普及,避免不了要适应各种大小的屏幕,所以测试工作在开发中尤为重要: 设定各个分辨率的浏览器在目前各大浏览器中都有展现,但是用起来都比较不方便,所以我们推荐一款谷歌的自适应插件 Viewport Resizer 下载地址: http://pan.baidu.com/s/1eSunB9…