• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

网页手机wap2.0网页布局 页面尺寸设置

2015-06-11 20:11:03   来源:叶景网络
    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
    width - viewport的宽度 height - viewport的高度  
    initial-scale - 初始的缩放比例 
    minimum-scale - 允许用户缩放到的最小比例  
    maximum-scale - 允许用户缩放到的最大比例 
    user-scalable - 用户是否可以手动缩放
    参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
    一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    其中: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable -
    用户是否可以手动缩放c
    二、关于meta的详细介绍请参考
    三、下文是关于Meta的例子的详细介绍 原文地址
    3. Meta元素可视区
    默认情况下,iPhone上的Safari会象在大屏幕的 桌面浏览器那样显示你的页面,宽度达到了980像素,然后缩小内容以适应iPhone的小屏幕,因此用户在iPhone看这个页面时感觉字体就比较小了, 也比较模糊,必须要放大才能看得真切,对于一个普通的Web页面似乎可以接受,但对于一个常用的应用程序就没几个人能够受得了。
    幸运的是可以使用特殊的Meta元素可视区进行纠正:
    <meta
    name="viewport" content="width=device-width"/>
    这个元素通知浏览器使用设备的宽度作为可视区的宽度,而不是默认的980像素了,我们可以看看两个不同的例子。
    例3(链接:http://www.sitepoint.com/examples/iphone-development-12tips/no- viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。
    手机页面尺寸设置
    例4(链接:http://www.sitepoint.com/examples/iphone-development-12tips /viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图 所示。
    手机页面尺寸设置
    另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例 5(链接:http://www.sitepoint.com/examples/iphone-development-12tips /fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。
    为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:
    <meta
    name="viewport" content="width=780"/>
    例6(链接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
    Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale –
    用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:
    <meta
    name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
QQ客服不加好友直接打开聊天窗口 QQ客服不加好友直接
网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2.0网页
手机wap页面前端的一点体会 手机wap页面前端的
常用的文本符号以及非主流符号大全 常用的文本符号以及
关注排行RANKING
1

QQ客服不加好友直接打开聊天窗口

QQ客服不加好友直接打开聊天窗口 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

2

网页手机wap2.0网页布局 页面尺寸设置

网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2 0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以...

3

手机wap页面前端的一点体会

手机wap页面前端的一点体会 手机端的html页面就像回到了最早的纯文本时代~~ 没有JS,只有单纯的div+css~容易上手,...

4

常用的文本符号以及非主流符号大全

常用的文本符号以及非主流符号大全 在word文档工具栏的符号那里提供了许多文本符号,但我还是觉得不够用,于是我从网上搜寻...

5

input /button链接的几种方法

input /button链接的几种方法 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

6

用JavaScript怎么实现页面跳转

用JavaScript怎么实现页面跳转 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

7

从GB2312(UTF-8)页面获取表单转换...

从GB2312(UTF-8)页面获取表单转换成UTF-8(GB2312) 由于我的网站编码是GB2312,而另一个网站(不是我的)编码却是UTF-8, ...

8

收藏本站和设为主页代码

收藏本站和设为主页代码 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

textarea 滚动条属性设置

textarea 滚动条属性设置 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...