手写一个手机网页

最新推荐文章于 2023-07-17 11:44:50 发布

黄铜渣渣

最新推荐文章于 2023-07-17 11:44:50 发布

阅读量632

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/u014330950/article/details/78611559

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、添加viewport标签

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

2、禁止将数字变为电话号码

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

3、iphone设备中的safari私有meta标签

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

4、iphone的私有标签

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="author" content="duanliang, duanliang920.com" />
<style>
body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:640px; min-width:300px; margin:0 auto;}
</style>
</head>

<body>
<div>
大家好！我是段亮，这是我的第一个手机网页哦！
</div>
</body>
</html>

html5模板代码
<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML5移动端开发模板</title>

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

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

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

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

<meta content="email=no" name="format-detection" />

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
/*reset 重置*/
body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
li{list-style:none;vertical-align:top;}
table{ border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle;}
em{ font-style:normal;}
a{ text-decoration:none;}
a,input{
-webkit-appearance: none;/*屏蔽阴影*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ios android去除自带阴影的样式*/
}
a, img {
/* 禁止长按链接与图片弹出菜单 */
-webkit-touch-callout: none;

}
html, body {
/* 禁止选中文本(如无文本选中需求,此为必选项) */
-webkit-user-select: none;
user-select: none;
}
/*public*/
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
}
.clear{zoom:1;}
.clear:after{content:''; display:block; clear:both;}
.fl{float:left;}
.fr{float:right;}
.viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
</style>
</head>
<body>
<div>
<div>这是一个移动端开发模板哟!</div>
</div>
</body>
</html>

html5和html的区别就是前者增加了一些语义化标签和对移动端的支持
手机端和PC端的区别就是前者布局采用流体布局，百分比。字体单位用rem 少用px
<style>
html { font-size:62.5%;}/*16px*/
body { font-size:1.4rem;}/*14px*/
h1 { font-size:204rem}/*24px*/
</style>