移动端开发使用的meta和常用设备媒体查询一览表-胡新春个人博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  程序员式幽默
  •  闲言碎语
  •  博客大计事
  •  留言板
  • 
    移动端开发使用的meta和常用设备媒体查询一览表
     作者:胡新春  发布时间:2018-02-19 22:00:51  访客:614

    常用的 meta 值:


    <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">

     


    常用设备媒体查询一览表:


    应用于iPhone4和4s


    @media only screen
    
    and (min-device-width:320px)
    
    and (max-device-width:480px)
    
    and (-webkit-min-device-pixel-ratio:2){}


    iphone5和5s


    @media only screen
    
    and (min-device-width:320px)
    
    and (max-device-width:568px)
    
    and (-webkit-min-device-pixel-ratio:2){}


    iphone6 


    @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;}
    
    }


    页面样式


    *{ -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="text"],input[type="tel"],input[type="button"],
    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:"020",display:block;
    height:0;overflow:hidden;clear:both}


    iphone 6+


    @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;}
    
    }


    Android width360 (360的宽的设备):


    @media only screen
    
    and (min-device-width:360px)
    
    and (max-device-width:640px){
    
    html {font-size:112.5px;}
    
    }


    Android width411(411的宽的设备):


    @media only screen
    
    and (min-device-width:400px)
    
    {
    
    html {font-size:128.4375px;}
    
    }



    设备屏幕分辨录对照表


    *一位热心的外国友人通过邮件向我推荐的设备屏幕分辩自动识别工具,我觉得很不错,在此谢过,并分享给大家!


    工具:我的屏幕分辩率是什么

    点评一下

    
    程序:HXC博客v2.0 主题:HXC博客前端Funs主题    基于CodeIgniter框架构建
    博客平稳运行2年+