邮件内加网页在手机内的手机网页自适应代码

&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /&
在网页的&head&中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。
原文出自:
Views(...) Comments()一个手机自适应的网页效果解决显示页面很小的问题
作者:佚名
字体:[ ] 来源:互联网 时间:03-20 15:55:53
这篇文章主要介绍了一个手机自适应的网页效果解决显示页面很小的问题,需要的朋友可以参考下
工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉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"& 最后就是不要设置太大的具体宽度属性了,比如你在网页把Body的宽度属性设为1000px,这肯定是不行的了,但是可以设置为90%,这是屏幕自适应的。 PS:本人做了个效果页面,可以用手机正常显示哦,
大家感兴趣的内容
12345678910
最近更新的内容通过接个简单的代码对手机web页面优化——网页自适应优化 | 伪技术の宅
& 通过接个简单的代码对手机web页面优化——网页自适应优化
如今手机几乎代替了pc,这两天替学生会做报名系统的时候注意到了,以前做的简单的web界面已经不再适应潮流了,于是从网上找来一些简单实用的代码,轻轻松松改为网页~
具体方法:
在网页代码的header处,加入一行viewport标签。
&meta name=”viewport” content=”width=device-width, initial-scale=1″ /&
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。
另外要注意下面几点
1. 不用绝对宽度
这非常重要。 具体说,CSS代码不能指定像素宽度: width: 只能指定百分比宽度: width: xx%; 或者:width: 这里开发是指一个网页不仅能用在ps上,也能同时用于移动端,但是对于webapp这种还是需要单独做一个webapp使用的页面。
对于这个知识点,对于我目前做的项目有用处,主要用于控制限定数据库里读出来的图片宽度。 详见:手机webapp的jquery mobile初次使用心得和解决图片大小问题
2. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body { font: normal 100% Helvetica, Arial, sans- }
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 { font-size: 1.5 }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small { font-size: 0.875 }
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
3. 流动布局(fluid grid)  
.main { float: width: 70%; } .leftBar { float: width: 25%; }
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 另外,绝对定位(position: absolute)的使用,也要非常小心。
4. “网页设计”的核心,就是CSS3引入的Media Query模块。
&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文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) { .column { float: width: } #sidebar { display: } }
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
6. 图片的自适应(fluid image) 除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。 这只要一行CSS代码:  
img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,
所以只好写成: img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: } 或者,Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById(“content”).getElementsByTagName(“img”); imgSizer.collate(imgs); });
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
全国限量1000台索尼初音限定版耳机!N宅团购中~赶紧买买买!
您可能也喜欢:
从日起,N宅将不再提供付费服务,改为免费提供ss代理服务具体服务器信息请加QQ群(点击加群)查看群公告或查看网站公告。
由于成本原因...
在谢宁方法(Shainin Approach)中,图基(Tukey)检验被广泛用于验证质量改进的有效性。Tukey检验的一个重要的优点是非常简单,而且所需实验样本相对较少。...
Cydia中搜索shadowsocks然后安装即可,之后参考 /3118.html 中的相应内容进行设置即可。
挖坑中….过两天补齐…..orz
全国限量1000台索尼初音限定版耳机!N宅团购中~赶紧买买买!
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp}

我要回帖

更多关于 网页手机端自适应 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信