移动端常用meta及问题

最新推荐文章于 2021-12-28 19:07:44 发布
原创最新推荐文章于 2021-12-28 19:07:44 发布 · 487 阅读
1 ·
CC 4.0 BY-SA版权
前端专栏收录该内容
63 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<!-- viewport
	<meta name="viewport" content="width=640"> 
	content="width=number" 有些android存在兼容
	user-scalable=0 禁止缩放 iOS10+已经不在支持
	initial-scalable android还是支持
	minimun-scale:最小缩放比例 与初始缩放比例相同
	设计稿最少750
-->
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 控制状态栏显示样式 -->
<Meta http-equiv="Pragma" Content="No-cach">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-cache">
<!-- 	viewport:可视区窗口
	如果不设置viewport,一般默认可视区宽度为980
	width 可视区宽度（number||device-width）
 -->	
 	<!-- 禁止识别电话号码和邮箱号码 -->
 	<meta name="format-detection" content="telephone=no,email=no">


	<!-- QQ 浏览器x5内核定制标签说明 -->
	<!-- portrait 竖屏 x5-orientation qq浏览器比如内置的微信-->
	<meta name="x5-orientation" content="portrait|landscape">
	<!-- 设置全屏 -->
	<meta name="x5-fullscreen" content="true" />
	<!-- 设置屏幕模式 -->
	<meta name="x5-page-mode" content="app" />
	<!-- UC 浏览器的部分私有Meta 属性 -->
	<!-- 设置屏幕方向为横屏还是竖屏 -->
	<meta name="screen-orientation" content="portrait|landscape">
	<!-- 设置是否全屏，yes表示强制浏览器全屏 -->
	<meta name="full-screen" content="yes">
	<!-- 缩放不出滚动条 -->
	<meta name="viewport" content="uc-fitscreen=no|yes"/>
	<!-- 设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。 -->
	排版
	<meta name="layoutmode" content="fitscreen|standard" />
	<!-- fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。 -->
	<!-- 夜间模式 -->
	<meta name="nightmode" content="enable|disable"/>
	<!-- nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。 -->
	<!-- 强制图片显示 -->
	<meta name="imagemode" content="force"/>
	<!-- UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个 -->
 <title>hello</title>
</head>
<style>
*{margin: 0;padding: 0;}
.div{width: 100px;height: 100px;background-color: #f00;}
/*清除点击阴影*/
a,input,button{
	-webkit-tap-highlight-color:rgba(255,255,255,0);
}
/*清除按钮默认样式*/
input,button{
	webkit-appearance:none;
	border-radius:0;
}
body{
	font-family:Helvetica;
}
body *{
	/*禁止字体缩放*/
	-webkit-webkit-text-size-adjust: 100%;
	/*选中文字样式*/
	-webkit-user-select:none;
}

</style>
<body>
	<p测试</p>
	<div class="div">1</div>
	<!-- 拨打电话 -->
	<a href="tel:1383283xxxx">1383283xxxx</a>
	<!-- 发送邮件 -->
	<a href="mailto:xx@qq.com">xx@qq.com</a>

	<!-- 移动端常见问题 -->
	一:Font Boosting :在一段文字中我们没有给它设置高度的时候，在webkit内核下，文字大小被浏览器放大
	解决方法： 
		1:设置高度
		2:设置最大高度
		给元素单独设置width或height或max-height即可禁用Text Autosizer
	二:Fixed
	三：viewport布局
	<script>
	(function(){
		var w = window.screen.width;
		var targetW = 320;
		var scale = w / targetW;
		var meta = document.createElement("meta");
		meta.name = "viewport";
		meta.content = "user-scalable=no,initial-scale="+scale+".minimun-scale="+scale+",maximum-scale="+scale+"";
		document.head.appendChild(meta);
	})()
	</script>

	<script>
	// alert(window.devicePixelRatio);
	</script>
</body>
</html>