<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<!--x5内核浏览器 (qq) 强制竖屏显示-->
<meta name="x5-orientation" content="portrait" />
<!--x5内核浏览器 (qq) 全屏显示-->
<meta name="x5-fullscreen" content="true" />
<!--禁止电话号码识别和邮箱识别-->
<!--<meta name="format-detection" content="telephone=no,email=no" />-->
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
/*设置字体*/
body{
/*默认字体设置*/
font-family: helvetica;
}
body *{
/*禁止字体缩放*/
-webkit-text-size-adjust: 100%;
}
a,
input,
button{
/*清除点击阴影*/ /*全透明色*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
input,
button{
/*清除圆角*/
-webkit-appearance: none;
border-radius:0;
}
/*Foot Boosting 在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大了
解决办法:
1.设置高度
2.设置最大高度 max-height*/
</style>
<script>
// alert(window.devicePixelRatio);
//n=window.devicePixelRatio;
//把一个像素放大至n个像素去显示
//设计图最少750
</script>
</head>
<body>
这是我的第一个移动端页面
<div id="box"></div>
<p>442564584</p>
<!--拨打电话-->
<a href="tel:110">请拨打电话:</a>
<!--发送邮件-->
<a href="mailto:285617424@qq.com">请发送邮件</a>
<br />
<!--a连接,按钮,移动端点击的时候有灰色背景-->
<a href="http://www.baidu.com">百度</a>
<!--真机上按钮会变成圆角-->
<input type="button" value="按钮" />
</body>
</html>