手机页面尺寸设置(一)

参考: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"/>

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

时间: 2024-10-17 08:14:04

手机页面尺寸设置(一)的相关文章

手机页面尺寸设置(二)

通用Meta定义 1. (1)强制让文档与设备的宽度保持1:1: (2)文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值): (3)user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小. 下图分别是没有定义viewport和定义viewport在手机上显示的hello world网页.    注意:实际测试中发现,HTC G7自身系统浏览器不支持这一条规则,能够对页面进行放大,一旦放大响应的box也随之放大,导致俄

手机页面宽度设置效果,去掉边框距离空白。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri=&

手机页面左右漂浮, PC端没有滚动条的抓狂问题

手机页面经常设置了设备宽度,也不允许用户缩放,往往发现页面左右宽度大于设备宽度,导致左右页面的漂浮. 针对此现象可以 隐藏各个区块逐一打开 看看到底漂浮发生在哪个区块, 然后针对这个区块,在手机版css里写入overflow:hidden   . 有时候莫名其妙发现PC版页面右侧的滚动条不了, 看看有没有在 body里写overflow:hidden这么坑爹的设置.

怎么制作HTML5页面让它适应电脑和手机的尺寸?

1. 利用meta标签 Meta标签主要用来描述一个HTML网页文档的属性,如作者.日期时间.网页描述.关键词.页面刷新等,它的Description和Keywords属性,可加入网站的关键字,让网页利于搜索引擎. <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

Chrome调试手机页面

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤 打开 仿真面板.如图所示: 可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸. 可以在

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

移动互联,手机页面设计

1.手机上网的过程 普通浏览器上网过程  浏览器<--->Web服务器 手机上网过程  手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器 * UP指Unwired Planet公司,其UP.Phone浏览器为手机浏览器的事实标准,以下内容都基于该标准.  *普通web页面用HTML描述,目前手机页面可以用HDML和WML两种语言来描述,它们本质上是用XML 1.0来定义的.本文主要讲述HDML,由于其和HTML有相似,

学习手机页面制作4

学习手机页面制作-制作固定-流式-固定的布局 制作左右固定宽度中间自适应的页面布局 具体的页面效果可以http://m.juhuasuan.com/m/index.htm 的头部导航 传统的布局方式 使用定位的方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定比例固定</title&

New UI-获取手机屏幕尺寸与分辨率,屏幕适配,横竖屏问题

New UI-获取手机屏幕尺寸与常用分辨率,屏幕适配,横竖屏问题 --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http:/