工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录!

其实主要就是改掉HTML页面声明:

在网页中加入以下代码,就可以正常显示了:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

解释:

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

精简点的话,可以把上面的代码更改为以下代码,效果是一样的:

 <meta content="width=device-width,user-scalable=no" name="viewport">

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90% 或者 auto,这是屏幕自适应的。

-----------------------------------补充:我是快乐的分割线  ---------------------------------------------------

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

相对大小的字体

字体也最好不要使用绝对大小(px),而是使用相对大小(em)。

body { font: normal 100% Helvetica, Arial, sans-serif; }

上面的代码指定,字体大小是页面默认大小的100%,即16像素。

h1 { font-size: 1.5em; }

然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

small {  font-size: 0.875em;   }

small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

流动布局(fluid grid)

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

.main { float: right; width: 70%; }
.leftBar { float: left; width: 25%; }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

另外,绝对定位(position: absolute)的使用,也要非常小心。

选择加载CSS

"自适应网页设计"的核心,就是CSS3引入的Media Query模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

 @import url("tinyScreen.css") screen and (max-device-width: 400px);

CSS的@media规则

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) {
    .column { float: none; width:auto; }
    #sidebar { display:none; }
  }

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

图片的自适应(fluid image)

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放

这只要一行CSS代码:

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

 img { -ms-interpolation-mode: bicubic; }

或者,Ethan Marcotte的imgSizer.js

addLoadEvent(function() {
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
  });

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

补充来源:自适应网页设计(Responsive Web Design)

【问题&解决】手机网页Html代码实现(解决显示页面很小的问题)的更多相关文章

  1. 手机网页Html代码实现(解决显示页面很小的问题)

    工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport ...

  2. MAC 系统升级10.10以后PHP验证码错误的解决办法。[ 一行代码轻松解决! ]

    MAC 升级到10.10 以后PHP版本为5.5,初步判定是由于FreeType 字体库的原因,导致GD库有些问题,总之就是验证码出不来.很多大牛给出的办法是重新编译PHP,这对于手头有项目的人来说可 ...

  3. 解决h5网页微信分享链接不能显示缩略

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js& ...

  4. mp4网页播放代码,有声音无图像的解决办法~

    mp4网页播放代码,有声音无图像的解决办法~     关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...

  5. FIREMONEY手机虚拟键盘遮挡的解决

    FIREMONEY手机虚拟键盘遮挡的解决 尝遍了网上人们提供的N种方法之后,发现还是老猫的方法才是彻底解决问题的办法. 老猫“不看后悔XXX”--->RAD10.2.3 Flying Wang ...

  6. 使用history.back()出现"警告: 网页已过期的解决办法"

    原因: 表单提交页面中使用了 session_start 函数.由于我们后退浏览的是缓存页,而该函数会强制当前页面不被缓存. 解决: PHP: 此提示出现在一个POST提交的页面,点到其它页面后,通过 ...

  7. 关于github在mac 10.10上无法提交代码的解决办法---备用

    接下来是正文:本文主要说明在mac 10.10版本下github无法提交代码的问题 首先如果你是一个用终端提交代码的,你可以不用看这篇文章了,这篇文章主要是用于解决github客户端提交代码的问题,此 ...

  8. 【技术贴】解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法

    [技术贴]解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法 错误是:Aborting commit: xxxxx’ remains ...

  9. 【技术贴】解决myeclipse SVN 提交代码 commit:remains in tree-c

    [技术贴]解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法 错误是:Aborting commit: xxxxx' remains ...

随机推荐

  1. 【Python】django多对多 查询 ,反查等操作

    The Django Book中这样写 但我使用属性名后加_set会报错 而直接用members = group.user_group_join.all() 就可以 可能因为我的MyUser类里有两个 ...

  2. Eclipse 一直提示 loading descriptor for 的解决方法(转)

    启动eclipse之后,进行相关操作时,弹出界面,提示:loading descriptor for xxx 解决方法: 在Eclipse左侧的Project Explorer 最右上角有一个小钮,鼠 ...

  3. 【原创】sql:慎用【数字字段1 - 数字字段2】这样的sql(10-null = null)mysql

    如果只有一个表的情况下 a表: id num1,num2 1 10 5 2 10 0 3 20 0 select id, num1,num2,num1 - num2 AS subNum from a; ...

  4. sc 与net命令的区别

    windows服务操作命令有sc和net 两个命令; sc stop serviceName  sc start serviceName net stop serviceName  net start ...

  5. DP:Skiing(POJ 1088)

     北大教你怎么滑雪 题目是中文的,要读懂题目其实不难 其实这道题挺经典的,我们这样想,他最终要找到一个最大值,这个时候我们就想到要用动态规划 那怎么用呢?我们同时这样想,由于滑雪的最高点我们不能立马找 ...

  6. hdu 1213 How Many Tables 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1213 有关系(直接或间接均可)的人就坐在一张桌子,我们要统计的是最少需要的桌子数. 并查集的入门题,什 ...

  7. 学习cocos-js的准备工作

    我学习 cocos2d-js 的方向: 学习 cocos2d-js 的 HTML5 版本:即 canvas 渲染. 下载cocos-js 文件 地址: http://www.cocos2d-x.org ...

  8. 如何识别是visual studio下头的哪种类型程序

    可以通过文件来判断 比如MFC, 那它就会包括xxxview.cpp文件. win32又分为win32项目和console(即控制台应用程序),看主函数 win32控制台应用程序的主函数为_tmain ...

  9. oracle 序列 详解

    序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l  自动提供唯一的数值 l  共享对象 l  主要用于提供主键值 l  将序列值装入内存可以提高访问效率 创建序列: 1.  要有创建 ...

  10. mysql:表注释和字段注释

    mysql:表注释和字段注释 1 创建表的时候写注释 create table test1 ( field_name int comment '字段的注释' )comment='表的注释'; 2 修改 ...