• web移动开发时需要加的meta标签和样式的初始化


     
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <meta content="email=no" name="format-detection" />
    html, body ,div, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,a,img,span,em,i,b,iframe,strong,label{ padding:0; margin:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
    html,body{height:100%;/*overflow-x: hidden;*/}
    html{-webkit-font-smoothing: antialiased;-webkit-text-size-adjust:none;}
    body{font-size: 16px;font-family:sans-serif; color: #000;background-color:#ececec;}
    
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section,summary{display:block;}
    ol,ul{ list-style: none; }
    a{ text-decoration: none; color: #333; cursor: pointer;-webkit-touch-callout:none;}
    em, i { font-style: normal; }
    img{vertical-align:middle;border:none; -webkit-touch-callout:none;}
    a,input, select, textarea,button { padding:0; margin:0;border: 0;outline: 0; border-radius: 0;  -webkit-appearance: none;}
    input:disabled{background-color: #fff;}
    textarea{resize: none;}
    table {border-spacing: 0;border-collapse: collapse;}
    
    ::-webkit-scrollbar {width: 3px; height:3px;background-color:transparent; }   
    ::-webkit-scrollbar-track {background-color:transparent;}    
    ::-webkit-scrollbar-thumb {background-color:rgba(0, 0, 0, .298039);border-radius: 2px;}
    
    ::-webkit-input-placeholder { color: #666;opacity:  1;}
    :-moz-placeholder {color: #666;opacity:  1;}
    ::-moz-placeholder {color: #666;opacity:  1;}
    :-ms-input-placeholder {color: #666;opacity:  1;}
    /*自适应*/
    @media screen and (max- 680px) {
        body{font-size: 100%;}
        .wrap{width: 100%;}
    }
    @media screen and (max- 480px) {
        body{font-size: 14px;}
        .wrap{width: 100%;}
    }
    @media screen and (max- 359px) {
        body{font-size: 12px;}
        .wrap{width: 100%;}
    }
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <!--[if lt IE 9]>
           <script type="text/javascript" src="/js/lib/respond.min.js"></script>
           <script type="text/javascript" src="/js/lib/html5shiv.min.js"></script>
    <![endif]-->

    直接copy

  • 相关阅读:
    调用DirectX进行简单的多媒体编程系列(一)
    C#中编写sqlserver中自定义函数,实现复杂报表
    学习笔记:javascript定义类的过程(类一词是形象说法,javascript中并没有类一词)
    HttpModule与HttpHandler详解 (转)
    asp.net运行原理(转)
    最近项目报表开发中写的存储过程学生综合成绩对比
    调用DirectX进行简单的多媒体编程系列(四)
    清欠率(存储过程)
    ExtJS中的面向对象设计,组件化编程思想
    ExtJS中如何扩展自定义的类
  • 原文地址:https://www.cnblogs.com/webgg/p/5310232.html
Copyright © 2020-2023  润新知