Viewport在开发手机Web中的应用

目前比较主流的移动设备系统包括 Android,IOS ,Symbian,BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心,而webkit号称是一款全功能的移动浏览器,支持 HTML + CSS + JavaScript,但由于移动设备本身与PC的差异,导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。

Viewport 翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一段都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。

那么我们是否可以改变webkit的视区呢?当然能,加上如下视区代码:

<meta name="viewport" content="width=500" />

那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小,然后让内容自适应。很简单,看来面的代码:

<meta name="viewport" content="width=device-width" />

device-width将自动检测移动设备的屏幕宽度。所有页面内容都和移动设备屏幕自适应。

Viewport在开发手机Web中的应用,布布扣,bubuko.com

时间: 07-07

Viewport在开发手机Web中的应用的相关文章

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资. 技术的选择 jQuery Mobile  Phone Gap  等都是比较成熟的框架为什么我不用这些框架呢? 因为我考虑到底层的技术应用和练习 . 我的选择是:Html5+css3+angularjs+jquery HTML5+CSS

[HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1.最常用WEB页面J

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

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

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

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

手机web开发Repeater四层嵌套

最近有朋友想让我给他做个手机上页面,页面功能是显示省--市--区--门店信息,这种层级关系的数据,首先来看看效果: 我想现在的手机都是智能机了对于普通的asp.net页面开发应该没什么两样,不过最终开发下来还是有点区别: 1:首先是Safari浏览器对js的支持,和IE下面的区别. 2:页面数据的显示以及缩放等效果. 介于以上要求,我考虑使用Repeater多层嵌套来实现,下面是页面代码: <%@ Page Language="C#" AutoEventWireup="

手机web开发

jqmobi 可以代理 jquery mobile,似乎更加小和快 http://app-framework-software.intel.com/components.php bootstrap 团队做的手机端样式 http://goratchet.com/components/ ----------------------------------------------------------------------------- 电脑模拟手机 Opera Mobile Emulator C

移动web开发案例实战/webApp网站开发/手机网站模板/web前端切页

网站目录.代码结构清晰,语义化.主张100%纯手打代码.拒绝冗余框架慵懒建站.拒绝散漫,执着于把细节做到完美无瑕.我们的作品,可以逐级放大欣赏. 运用当下热门HTML5+CSS3(rem)+jQuery+zepto+Iscroll+swiper+Vue等技术开发手机webApp应用 - 移动端web网站(移动端web开发/APP开发).前端开发.移动端App模版.手机网站模版.HTML5+CSS3响应式网站模版~~~ /** 我们建站作品特色 **/主张原创设计,拒绝数量.追求质量!独特的设计风

手机web——自适应网页设计

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"