手机页面尺寸设置(一)

摘要:
图2有可视区的显示效果另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例5显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale–用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:˂metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/˃这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小

参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。

其中: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable -
用户是否可以手动缩放c

二、关于meta的详细介绍请参考

三、下文是关于Meta的例子的详细介绍原文地址

3. Meta元素可视区

默认情况下,iPhone上的Safari会象在大屏幕的 桌面浏览器那样显示你的页面,宽度达到了980像素,然后缩小内容以适应iPhone的小屏幕,因此用户在iPhone看这个页面时感觉字体就比较小了, 也比较模糊,必须要放大才能看得真切,对于一个普通的Web页面似乎可以接受,但对于一个常用的应用程序就没几个人能够受得了。

幸运的是可以使用特殊的Meta元素可视区进行纠正:

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

这个元素通知浏览器使用设备的宽度作为可视区的宽度,而不是默认的980像素了,我们可以看看两个不同的例子。

例3(链接:http://www.sitepoint.com/examples/iphone-development-12tips/no- viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。

手机页面尺寸设置

图 1 无可视区的显示效果

例4(链接:http://www.sitepoint.com/examples/iphone-development-12tips /viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图 所示。

手机页面尺寸设置

图 2 有可视区的显示效果

另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例 5(链接:http://www.sitepoint.com/examples/iphone-development-12tips /fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。

为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:

<</SPAN>meta
name="viewport"content="width=780"/>

例6(链接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。

Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale –
用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:

<</SPAN>meta
name="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>

这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小

免责声明:文章转载自《手机页面尺寸设置(一)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇win7 安装.Net framework 4.0出现 安装不成功,错误代码0x80240037 的解决方法maven学习(一)setting.xml配置文件详解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

android 手机分辨率

QVGA(Quarter VGA):其分辨率为240×320像素,是当下智能手机最常用的分辨率级别。240×320像素的意思就是,手机屏幕横向每行有240个象素点,纵向每列有320个象素点,乘起来就是320×240=76800个象素点。早期的智能手机也大都采用这一显示级别的屏幕。WQVGA(Wide QVGA):分辨率为240×400或者240×432HV...

Qt Quick开发教程1-环境配置

Qt Quick 安卓开发环境配置 Qt Widget已发展成熟,但不适合在移动设备(Android 手机、平板)上使用。Qt Quick使用QML的开发方式。 现在对Android开发环境进行配置[1]。 所需文件: Java SE Development Kit (JDK) version 6, or later. You can also use...

如何为自己的网站添加关键字

如何为自己的网站添加关键字 1、将网站地址提交给搜索引擎,确定已被收录2、在页面的head标签中加入下面的代码<meta name="keywords" content="关键字1, 关键字2, 每个关键字要用逗号隔开" /><meta name="description" content="页面内容的描述,可以随便写" />ps...

Fiddler (四) 实现手机的抓包

Fiddler是我最喜爱的工具,几乎每天都用, 我已经用了8年了。 至今我也只学会其中大概50%的功能。 Fiddler绝对称得上是"神器", 任何一个搞IT的人都得着的。 小弟我立志, 一定要把Fiddler的所有的功能和用法都写出来。 写成一个完整系列的教程。 Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP...

MIUI 10以上版本通用线刷ROOT方法

1.高版本系统解锁     (解锁工具下载)     http://www.miui.com/unlock/index.html     注意事项:登陆解锁工具的账号必须是登陆小米手机的账号     解锁步骤在解锁工具上有说明,就两个步骤。 2.解锁 安装小米助手最新版本  清空数据:关闭手机-按住关机+音量加-选择清空数据    关闭手机- 打开小米助手...

AirtestIDE基本功能(一)

上期回顾:AirtestIDE环境安装 上次我们已经介绍了AirtestIDE如何安装,下面我们启动AirtestIDE来看看里面都有哪些功能呢? Airtest辅助窗(左上):这里主要是用来生成airtest框架中的代码的。 Poco辅助窗(左下):这个主要是用来抓取元素信息的,类似于Chrome F12查看Web元素、Appium Inspecto...