1. 页面宽度320， 所有元素尺寸设一半

缺点：不自能适应全屏

2.页面宽度640，元素尺寸正常

<meta charset="utf-8" />

<meta name='viewport' content='width=640, user-scalable=no, target-densitydpi=device-dpi' />

<meta http-equiv="keywords" content="" />

<meta name="description" content="" />

内嵌到app端有时会有尺寸问题

3.页面宽度640，js控制自适应全屏

<script type="text/javascript">

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6 P=(h(){6 4=(h(){6 g={};6 N={a:e.C.a,i:e.C.i};6 t=e.K.Y;6 s=e.l;6 j=w;6 I=h(f){m f.18==X?t.y(f)>-1:t.R(f)};6 v=h(b,f,p){7(b&&f)g[b]={f:f,p:p}};6 x=h(b){7(g[b])Q g[b]};6 8=h(){7(j!=w)m j;S(6 b T g){7(I(g[b].f)){j=g[b].p;V}}7(j==w)j=N;m j};m{v:v,x:x,8:8,s:s}})();6 z=h(q){6 3,9,u,B,d,c,o;o=K.1b.16();A=o.y(\'W\')>-1||o.y(\'17\')>-1;9=e.9;9<1.5?2:9;7(e.l==0||e.l==F){7(4.s!=0){7(4.8().a<4.8().i){3=4.8().a}k{3=4.8().i}}k{3=4.8().a}}k{7(4.s!=0){7(4.8().a>4.8().i){3=4.8().a}k{3=4.8().i}}k{3=4.8().i}}7(9==2&&(3==D||3==14||3==13||3==r)){3*=2};7(9==1.5&&(3==D)){3*=2;9=2};7(9==1.5&&(3==r)){9=2};u=q/3*9*Z;B=A?\'a=\'+q+\'10, M-L=H\':\'12-11=\'+u+\', a=\'+q+\', M-L=H\';d=G.19(\'d\');c=G.15(\'U\');c.b=\'c\';c.O=\'c\';c.E=B;7(A&&e.l!=0&&e.l!=F){c.E=\'a=r\';d.n>0&&d[d.n-1].J(c)}k{d.n>0&&d[d.n-1].J(c)}};m{4:4,z:z}})();6 1a=r;',62,74,'|||deviceWidth|regulateScreen||var|if|cal|devicePixelRatio|width|name|viewport|head|window|key|cache|function|height|_|else|orientation|return|length|ua|size|uiWidth|640||ver|targetDensitydpi|add|null|del|indexOf|adapt|isiOS|initialContent|screen|320|content|180|document|no|check|appendChild|navigator|scalable|user|defSize|id|adaptUILayout|delete|test|for|in|meta|break|ipad|String|appVersion|160|px|densitydpi|target|592|360|createElement|toLowerCase|iphone|constructor|getElementsByTagName|_initViewportWidth|userAgent'.split('|'),0,{}));

adaptUILayout.adapt(_initViewportWidth);

</script>

缺点：qq空间分享后点开页面套在qq默认浏览器里有兼容性问题

4.rem写法，所有元素原尺寸长宽除以100，（注意背景图，图片的大小需要设置）
 <script type="text/javascript"> 
        //auto adaptation
        var calculate_size = function () {
            var BASE_FONT_SIZE = 100;
    
            var docEl = document.documentElement,
                clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 640) + 'px';
        };
    
        // Abort if browser does not support addEventListener
        if (document.addEventListener) {
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            window.addEventListener(resizeEvt, calculate_size, false);
            document.addEventListener('DOMContentLoaded', calculate_size, false);
            calculate_size();
        }
  </script>
<script type="text/javascript">

var root = document.getElementsByTagName('html')[0],

	NATIVE_W = 640;

function updateSize(){

	var w = window.innerWidth;

	var cw = w / (NATIVE_W / 100);

	root.style.fontSize = cw + 'px';

}

window.onload = function(){

	updateSize();

	document.getElementsByTagName('body')[0].style.display = 'block';

}

window.onresize = function(){ updateSize(); }

</script>
<body class="dis_none"></body>
缺点：挺麻烦
5.百分比

头部：
<meta charset="utf-8" />

<meta name="author" content="" />

<meta name="copyright"  content="" />

<meta name="Keywords" content="" />

<meta name="Description" content="" />

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

<meta name="format-detection" content="telephone=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-touch-fullscreen" content="yes"/>

<meta name="apple-mobile-web-app-status-bar-style" content="black">
												


											
移动端h5页面写法的更多相关文章
	

    
								
  1. 移动端H5页面高清多屏适配方案
		
    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
    
		
    2. 
						
  2. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
		
    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
    
		
    3. 
						
  3. [转]:移动端H5页面高清多屏适配方案
		
    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
    
		
    4. 
						
  4. 移动端h5页面的设计稿尺寸
		
    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
    
		
    5. 
						
  5. 教你如何用 lib-flexible 实现移动端H5页面适配
		
    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
    
		
    6. 
						
  6. 移动端H5页面惯性滑动监听
		
    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
    
		
    7. 
						
  7. vue移动端h5页面根据屏幕适配的四种方案
		
    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
    
		
    8. 
						
  8. 解惑好文：移动端H5页面高清多屏适配方案
		
    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
    
		
    9. 
						
  9. 移动端H5页面开发，碰到一个字体变大的BUG
		
    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust:  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 实现在线阅读pdf功能--php
			
    在网上找了很久,想要实现一个在线阅读word,pdf文件的功能,网上的资料很多,但是提到真正怎么实现的比较少.现在我来简单说明一下,我实现的过程. 我现在只能实现在线阅读pdf(将word等转换成pd ...
    
			
    2. 
						
  2. 在Fragment中使用BaiduMap SDK
			
    1:fragment_bshdzh.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
    
			
    3. 
						
  3. 微软在MSDN中更新了Win8.1批量授权版镜像（中文版更新完毕&版本说明）
			
    微软在MSDN中更新了Win8.1大客户专业版和企业版镜像,零售版镜像(即专业版+核心版二合一镜像)没有更新,依然是9月份发布的版本.已证实,新的批量授权版镜像是集成了GA Rollup A更新,并且 ...
    
			
    4. 
						
  4. libusb-win32 在visual studio2008中成功编译回忆录
			
    关于这个项目不用多说 介绍 libusb是一个针对usb通讯的库. 使用它, 你不需要知道操作系统的细节, 你只需要对USB有足够的了解即可. 它也不需要你写驱动, 所有的工作都可以在用户态完成. 使 ...
    
			
    5. 
						
  5. 【转】win32，win64编程永恒;语言编程需要注意的64位和32机器的区别
			
    原文网址:http://www.cnblogs.com/kex1n/archive/2010/10/06/1844737.html 一.数据类型特别是int相关的类型在不同位数机器的平台下长度不同.C ...
    
			
    6. 
						
  6. Linux下core文件产生的一些注意问题
			
    前面转载了一篇文章关于core文件的产生和调试使用的设置,但在使用有一些需要注意的问题,如 在什么情况 才会正确地产生core文件. 列出一些常见问题: 一,如何使用core文件 1. 使用core文 ...
    
			
    7. 
						
  7. Net-Snmp安装配置
			
    1. 下载安装 net-snmp安装程序:net-snmp-5.4.2.1-1.win32.exe Perl安装程序:ActivePerl-5.10.0.1004-MSWin32-x86-287188 ...
    
			
    8. 
						
  8. 页和区 sql server
			
    原文地址:http://msdn.microsoft.com/zh-cn/library/ms190969.aspx SQL Server 中数据存储的基本单位是页.为数据库中的数据文件(.mdf 或 ...
    
			
    9. 
						
  9. c++智能指针《一》 auto_ptr
			
    转载http://www.cnblogs.com/gnagwang/archive/2010/11/19/1881811.html C++的auto_ptr auto_ptr所做的事情,就是动态分配对 ...
    
			
    10. 
						
  10. JAVA中的正则表达式--待续
			
    1.关于“\”,在JAVA中的正则表达式中的不同: 在其他语言中"\\"表示为:我想要在正则表达式中插入一个普通的反斜杠: 在Java中“\\”表示为:我想要插入一个正则表达式反斜 ...
    
			
    11.