社交移动端网页牛刀小试——通过viewport适配（功能未完善版）

其他 2018-09-23 01:48:42 阅读次数: 0

html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>领哥做网页</title>
	<meta name="viewport" id="viewport" content="width=640">
	<script src="mobile-util.js"></script>
	<link rel="stylesheet" type="text/css" href="font/iconfont.css">
	<link rel="stylesheet" href="viewport.css">
</head>
<body>
	<div class="box">
		<header>
			<div class="menu iconfont icon-caidan fl"></div>
			<span class="header_item"><a href="#" class="active">Open</a><a href="#">Close</a></span>
			<div class="add iconfont icon-jiahao fr"></div>
		</header>
	</div>
	<div class="item">
		<div class="item_hd">
			<div class="item_title clearfix">
				<div class="user_img fl">
					<img src="1.png" alt="">
				</div>
				<h5>Martin Groove</h5>
				<span class="iconfont icon-xingxing fr">175</span>
			</div>
			<p class="text">我好，你好，大家好，才是真的好</p>
		</div>
		<div class="item_bd">
			<div class="ibd_img">
				<img src="6.jpg" alt="">
				<div class="ibd_time"><i></i><span>11:23:32</span></div>
			</div>
			<div class="btns clearfix">
				<span class="people fl iconfont icon-yonghu">9people</span>
				<a href="#" class="btns_mao iconfont icon-mao">accept</a>
				<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
			</div>
		</div>
	</div>


	<div class="item">
		<div class="item_hd">
			<div class="item_title clearfix">
				<div class="user_img fl">
					<img src="1.png" alt="">
				</div>
				<h5>Martin Groove</h5>
				<span class="iconfont icon-xingxing fr">360</span>
			</div>
			<p class="text">美好总是短暂的</p>
		</div>
		<div class="item_bd">
			<div class="ibd_img">
				<img src="3.jpg" alt="">
				<div class="ibd_time"><i></i><span>12:32:32</span></div>
			</div>
			<div class="btns clearfix">
				<span class="people fl iconfont icon-yonghu">11people</span>
				<a href="#" class="btns_mao iconfont icon-mao">accept</a>
				<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
			</div>
		</div>
	</div>

	
	<div class="item">
		<div class="item_hd">
			<div class="item_title clearfix">
				<div class="user_img fl">
					<img src="1.png" alt="">
				</div>
				<h5>Martin Groove</h5>
				<span class="iconfont icon-xingxing fr">99</span>
			</div>
			<p class="text">回家烧锅</p>
		</div>
		<div class="item_bd">
			<div class="ibd_img">
				<img src="2.jpg" alt="">
				<div class="ibd_time"><i></i><span>16:36:32</span></div>
			</div>
			<div class="btns clearfix">
				<span class="people fl iconfont icon-yonghu">19people</span>
				<a href="#" class="btns_mao iconfont icon-mao">accept</a>
				<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
			</div>
		</div>
	</div>
	
	<div class="item">
		<div class="item_hd">
			<div class="item_title clearfix">
				<div class="user_img fl">
					<img src="1.png" alt="">
				</div>
				<h5>Martin Groove</h5>
				<span class="iconfont icon-xingxing fr">3</span>
			</div>
			<p class="text">掰玉米</p>
		</div>
		<div class="item_bd">
			<div class="ibd_img">
				<img src="1.jpg" alt="">
				<div class="ibd_time"><i></i><span>17:39:36</span></div>
			</div>
			<div class="btns clearfix">
				<span class="people fl iconfont icon-yonghu">19people</span>
				<a href="#" class="btns_mao iconfont icon-mao">accept</a>
				<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
			</div>
		</div>
	</div>

	<div class="item">
		<div class="item_hd">
			<div class="item_title clearfix">
				<div class="user_img fl">
					<img src="1.png" alt="">
				</div>
				<h5>Martin Groove</h5>
				<span class="iconfont icon-xingxing fr">271</span>
			</div>
			<p class="text">疯狂的睡觉</p>
		</div>
		<div class="item_bd">
			<div class="ibd_img">
				<img src="2.jpg" alt="">
				<div class="ibd_time"><i></i><span>22:36:32</span></div>
			</div>
			<div class="btns clearfix">
				<span class="people fl iconfont icon-yonghu">1people</span>
				<a href="#" class="btns_mao iconfont icon-mao">accept</a>
				<span class="share fr iconfont icon-chakantiezifenxiang">share</span>
			</div>
		</div>
	</div>
</body>
</html>

css文件 

*{
	padding: 0;
	margin:0;
}
body{
	background-color: #fef4e4;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.clearfix{
	zoom:1;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.box{
	width: 640px;
	margin:0 auto;
	
}
header{
	padding: 31px 11px 10px;
	text-align: center;
}
.menu,.add{
	width: 53px;
	height: 53px;
	font-size: 46px;
	color: #000;
	text-align: center;
	line-height: 53px;
}
.header_item{
	display: inline-block;
	line-height: 53px;
	padding: 6px;
	border-radius: 8px;
	background-color: #EFE1D3;
}
.header_item a{
	display: inline-block;
	text-decoration: none;
	height: 41px;
	line-height: 41px;
	padding: 0 24px;
	color: #000;
	border-radius: 6px;

}
.header_item .active{
	background-color: #ff7f66;
	color: #fff;
}
.item_hd{
	padding: 41px 22px 0;
	line-height: 53px;
}
.user_img{
	height: 60px;
	width: 60px;
	border:solid 5px #ff7f66;
	border-radius: 50%;
	margin-right: 15px;
	overflow: hidden;
}
.user_img img{
	width: 100%;
	height: 100%;
}
.item_title h5{
	float: left;
	font-size: 26px;
	line-height: 70px;
	color: #ff7f66;
}
.item_title .icon-xingxing{
	font-size: 26px;
	line-height: 70px;
}
.icon-xingxing:before{
	margin-right:8px; 
}
.text{
	margin-top: 19px;
	line-height: 68px;
	font-size: 30px;
}
.ibd_img{
	position: relative;
}
.ibd_img img{
	width: 100%;
}
.ibd_time{
	width: 214px;
	height: 100%;
	position: absolute;
	top:0;
	left: 50%;
	background-color:rgba(0,0,0,0.3);
	color: #fff;
	margin-left: -107px;
	text-align: center;
	font-size: 36px;
}
.ibd_time i{
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.ibd_time span{
	vertical-align: middle;
}
.btns{
	height: 80px;
	background-color: #2f3d4c;
	padding: 0 20px;
	margin-top: -4px;
}
.icon-mao{
	width: 214px;
	height: 60px;
	margin:10px auto;
	display: inline-block;
	background-color: #ff7f66;
	border-radius: 10px;
	color:#fff;
	text-align: center;
	line-height: 60px;
	font-size: 30px;
	margin-left: 50px;
}
.people,.share{
	display: inline-block;
	color:#ccc;
	line-height: 81px;
	font-size: 30px;
}
.people:before,.share:before{
	margin-right:10px; 
}
a{
	text-decoration: none;
}

js文件 

/**
 * MobileWeb 通用功能助手，包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入，减少重绘。
 *
 * fixScreen 方法根据两种情况适配，该方法自动执行。
 *      1. 定宽： 对应 meta 标签写法    <meta name="viewport" content="target-densitydpi=device-dpi,width=750">
 *          该方法会提取 width 值，主动添加 scale 相关属性值。
 *          注意： 如果 meta 标签中指定了 initial-scale， 该方法将不做处理（即不执行）。
 *      2. REM: 不用写 meta 标签，该方法根据 dpr 自动生成，并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *          该方法约束：IOS 系统最大 dpr = 3，其它系统 dpr = 1，页面每 dpr 最大宽度（即页面宽度/dpr） = 750，REM 换算比值为 16。
 *          对应 css 开发，任何弹性尺寸均使用 rem 单位，rem 默认宽度为 视觉稿宽度 / 16;
 *          scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *          元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。
 */
window.mobileUtil = (function(win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
isMobile = isAndroid || isIos;  // 粗略的判断


return {
isAndroid: isAndroid,
isIos: isIos,
isMobile: isMobile,


        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ\/\d/gi.test(UA),
isYixin: /YiXin/gi.test(UA),
isWeibo: /Weibo/gi.test(UA),
isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),


tapEvent: isMobile ? 'tap' : 'click',


/**
* 缩放页面
*/
fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
    matchWidth = metaCtt.match(/width=([^,\s]+)/);


            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;


                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);


                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };


                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);


                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                var width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;


                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }


            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
            }
},


/**
* 转href参数成键值对
* @param href {string} 指定的href，默认为当前页href
* @returns {object} 键值对
*/
getSearch: function(href) {
href = href || win.location.search;
var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
href && href.replace(reg,function( $0, $1, $2, $3 ){
data[ $1 ] = $3;
});
return data;
}
};
})(window, document);


// 默认直接适配页面
mobileUtil.fixScreen();

效果展示：

猜你喜欢

转载自blog.csdn.net/zhangqling/article/details/82156234
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022