web前端开发个人技术博客
当前位置: HTML/CSS > 移动端开发需要加的meta以及css @media适应不同手机

移动端开发需要加的meta以及css @media适应不同手机

2019-04-17 分类:HTML/CSS 作者:码云 阅读(1027)

移动端开发需要加的meta以及css @media适应不同手机

我们在做移动端开发的时候都需要加一些meta标签,但是具体要加哪些meta标签我想大家不一定能加全,所以接下来码云笔记就为大家做一个系统的整理,最后再为大家附上移动开发的时候常用的css3媒体 media查询样式。

移动开发中头部要加的一些常用meta

1
2
3
4
5
6
7
8
9
10
11
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width">

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

<meta name="applicable-device" content="mobile">

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

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

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

css3 @media媒体查询适应不同的手机

iphone 4和4s

1
2
3
4
5
6
7
@media only screen

and (min-device-width:320px)

and (max-device-width:480px)

and (-webkit-min-device-pixel-ratio:2){}

iphone 5 and 5s

1
2
3
4
5
6
7
@media only screen

and (min-device-width:320px)

and (max-device-width:568px)

and (-webkit-min-device-pixel-ratio:2){}

Android width360

1
2
3
4
5
6
7
8
9
@media only screen

and (min-device-width:360px)

and (max-device-width:640px){

html {font-size:112.5px;}

}

android width411

1
2
3
4
5
6
7
8
9
@media only screen

and (min-device-width:400px)

{

html {font-size:128.4375px;}

}

iphone 6+

1
2
3
4
5
6
7
8
9
10
11
@media only screen

and (min-device-width:375px)

and (max-device-width:667px)

and (-webkit-min-device-pixel-ratio:2){

html {font-size:117.1875px;}

}

iphone 6

1
2
3
4
5
6
7
8
9
10
11
@media only screen

and (min-device-width:375px)

and (max-device-width:667px)

and (-webkit-min-device-pixel-ratio:2){

html {font-size:129.375px;}

}

初始化css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{ -webkit-tap-highlight-color:transparent;outline:0;margin:0;padding:0;vertical-align:baseline;fone-size:inherit;line-height:inherit;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,li,pre,form,field,legend,button,input,textarea,th,td{margin:0,padding:0,vertical-align:baseline;}
i,em{font-style:normal;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6,strong,b{font-weight:normal;}
input,select,button,h1,h2,h3,h4,h5,h6{font-size:inherit;font-family:inherit;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;color:#666;}
body{margin:0 auto;min-width:320px;max-width:640px;height:100%;font-family:Microsoft Yahei,Helvetica;line-height:1.5;color:#666;-webkit-text-size-adjust:100%!importtant;text-size-adjust:100% !important;}
textarea{resize:none;}
input[type=&quot;text&quot;],input[type=&quot;tel&quot;],input[type=&quot;button&quot;],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:nione;}

body{font-size:0.14rem;-webkit-overflow-scrolling:touch;}
html{box-sizing:border-box;font-size:100px;height:100%;-webkit-text-size-adjust:none}
*,*:before,*:after{content:&quot;020&quot;,display:block;height:0;overflow:hidden;clear:both}

以上就是移动端开发需要加的meta以及css @media适应不同手机的方法,整理一下方便我也方便大家查阅,毕竟时间长了大家都会忘得。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(15) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
15

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 移动端开发需要加的meta以及css @media适应不同手机

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流