windows Phone 浏览器窗口的尺寸
移动设备的屏幕一般都比PC小很多，移动设备的浏览器会将一个较大的 “虚拟” 窗口映射到移动设备的屏幕上，然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，移动浏览器会先以浏览器标准加载网页，然后再缩小为设备像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。如下图所示，一个普通的文章页面在移动设备的效果：
下面看一个示例，下面的网页宽度为 1024 像素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Viewport Test</title>
<style type="text/css">
.auto-style1 {
font-size: large;
color:white;
}
</style>
</head> <body>
<div style="position:absolute;top:0px;left:0px;width:1024px;
height:1024px;background-color:gray">
<p style="text-align:right" class="auto-style1">1024px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:480px;
height:480px;background-color:green">
<p style="text-align:right" class="auto-style1">480px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:320px;
height:320px;background-color:maroon">
<p style="text-align:right" class="auto-style1">320px</p>
</div>
<div style="position:absolute;top:0px;left:0px;width:240px;
height:240px;background-color:navy">
<p style="text-align:right" class="auto-style1">240px</p>
</div>
</body> </html>
在 Windows Phone 上，显示的效果如下所示：
设置常量的 viewport 宽度
如果你的站点希望使用特定的 viewport 宽度，在网页中为 viewport 设置一个硬编码的值就会得到你期望的行为，不依赖设备或者屏幕的分辨率，浏览器会调整初始的缩放比例将内容显示在虚拟的视口中。
例如，如果我们使用下面的设置
<meta name="viewport" content="width=320" />
在竖屏模式下，显示效果如下。
在横屏模式下，显示为。
如果重新设置为
<meta name="viewport" content="width=480" />
显示效果为
动态视口宽度
你可以通过将值设置为 device-width，让 IE 浏览器来选择实际的视口宽度。这个值告诉浏览器，网页可以适应多种分辨率，这就使得在方向发生变化的时候，浏览器可以立即改变内容的布局。
在 Windows Phone 7 浏览器内部，在竖向布局的时候，视口宽度为 320px, 横向布局的时候，宽度为 480px。
我们可以将设置修改为
<meta name="viewport" content="width=device-width" />
现在，竖向的时候，我们的网页效果成为如下效果
在旋转屏幕之后，尺寸会如我们期望的发生变化。
苹果的开发者站点有一篇详细的说明：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Mozilla 也有一篇说明：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
windows Phone 浏览器窗口的尺寸的更多相关文章
- Javascript和JQuery获取浏览器窗口各种尺寸
原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...
- JavaScript--DOM浏览器窗口可视区域大小
浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.inn ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- Windows窗口的尺寸和位置
介绍 窗口的大小和位置表示为一个矩形边界,该矩形的坐标是相对于屏幕或父窗口而言的.顶级窗口的坐标是相对于屏幕的左上角而言的,子窗口的坐标则是相对于父窗口的左上角而言.应用程序创建窗口时(CreateW ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
- 浏览器窗口尺寸相关的 API 整理图
整理浏览器中和屏幕尺寸相关的 API: 其中和文档相关的属性,例如 innerWidth.innerHeight.event.x.event.y 的单位为 CSS 像素,如果页面存在缩放,则需乘上缩放 ...
- JQuery_处理元素和浏览器的窗口的尺寸
一.jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或 ...
随机推荐
- Ruby Exception
begin #可能发生异常的地方 rescue #如何处理异常 end rescue,哈哈,太有爱的一个单词了... begin #可能发生异常的地方 rescue => exception # ...
- Struts2 - Rest(1)
Struts2提供了一个restful的插件:struts2-rest-plugin-2.3.16.1.jar 这个插件可以把Struts2当做restful来使用,不过它的rest功能目前来说有点“ ...
- Struts 1.3(第一例) - Login
本想跳过直接学Struts 2的,想想,还是先学Struts 1,万一到时去那个公司,人家用的是1,那还是要学,以及了解下1与2的区别在哪里. 上例子,很简单的一个网上login例子,再思考下Stru ...
- 【Redis】配置redis主从复制
阅读目录 redis-3.2.1.master tar zxvf redis-3.2.1.tar.gz mv redis-3.2.1 redis-3.2.1.slave-1 tar zxvf redi ...
- Redis介绍及实践分享
1.Redis是什么 1)Redis是REmote DIctionary Server的缩写,是一个key-value存储系统 2)Redis提供了一些丰富的数据结构,包括Strings,Lists, ...
- 如何设置DNS的SPF记录
如何设置DNS的SPF记录 Introduction SPF的完整意思为 "Sender Policy Framework".翻译过来就是发送方策略框架,是一项跟 DNS 相关的技 ...
- 【springBoot】springBoot集成redis的key,value序列化的相关问题
使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...
- SVN学习之svn命令行下的基本操作
http://huihai.iteye.com/blog/1985751 上一节已经把svn安装完成,下来就用命令行做一些简单的操作. 1.当svn安装完成后,svn管理人员会在svn的root根目录 ...
- 黄聪：Discuz!X/数据库操作方法、DB::table、C::t
函数 功能 DB::table($tablename) 获取正确带前缀的表名,转换数据库句柄, DB::delete($tablename, 条件,条数限制) 删除表中的数据 DB::insert($ ...
- iphone dev 入门实例5:Get the User Location & Address in iPhone App
Create the Project and Design the Interface First, create a new Xcode project using the Single View ...