移动端真机ios适配问题以及移动端会出现的一些小问题

  1. 字体加粗 font-weight:bold; //要用blod/bloder/nomar等 数字在移动端上无效

  2. 透明度 transport 在ios中不生效 ,直接用 rgba(52, 52, 52, 0)–透明 代替

  3. /系统默认菜单被禁用/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;

  4. 在安卓和ios上点击按钮事件添加之后双击的时候不会选中按钮上面的字 ,加上 cursor:pointer;即可

  5. 一些安卓APP的WebView中不工作 ,是因为安卓app的webview默认屏蔽了input控件的使用

  6. 隐藏滚动条 class名 ::-webkit-scrollbar {
    display: none;
    }

  7. 背景渐变色 background: linear-gradient(#fdd9a5, #fba55b);

  8. flez相关属性 display:flex; justify-content:space-around/space-between;

  9. 水平垂直居中 justify-content: center; align-items: center;

  10. 单行文本省略 width: 固定宽度;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  11. 下划线 text-decoration: underline;

  12. 微信小程序 1rpx=0.5px =1像素;

  13. 阻止旋转屏幕时自动调整字体大小
    * {
    -webkit-text-size-adjust: none;
    }

  14. input的placeholder会出现文本位置偏上的情况 line-height:normal;

  15. weui toast在ios上会弹出两次 是因为官方样式中的position:fixed不起作用 .weui-toast{
    position: absolute !important;
    }

  16. 动画帧
    .knock{animation: zhuan .3s linear;}
    @keyframes zhuan{
    0%{
    transform: rotate(0deg)
    }
    50%{
    transform: rotate(-45deg)
    }
    100%{
    transform: rotate(0deg)
    }
    }

  17. 移动端通用头部
    blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    /禁止长按链接与图片弹出菜单/
    -webkit-touch-callout: none;
    /系统默认菜单被禁用/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    }
    {
    box-sizing: border-box;
    /阻止旋转屏幕时自动调整字体大小/
    -webkit-text-size-adjust: none;
    }
    html,body{
    /
    禁止选中文本(如无文本选中需求,此为必选项) */
    -webkit-user-select: none;
    user-select: none;
    }
    html {
    font-size: 26.67vw;
    height: 100%;
    }
    body {
    font-family:“微软雅黑”,Arial;
    text-align: center;
    height: 100%;
    color:#fff;
    }
    img{
    vertical-align: middle;
    border: none;
    display: block;
    }
    a{
    text-decoration: none;
    }
    ul li{
    list-style:none;
    }
    input{
    outline: none;
    display: inherit;
    border: none;
    vertical-align: middle;
    }

    	万能清除浮动
    	.clearfix::after {
    	    content: ".";
    	    clear: both;
    	    display: block;
    	    overflow: hidden;
    	    font-size: 0;
    	    height: 0;
    	}
    	.clearfix {
    	    zoom: 1;
    	}                                           
    
  18. margin_bottom在ios上会失效(h5内嵌页面),此时可改为padding-bottom或者加个空的div,将位置撑开。

你可能感兴趣的:(移动端,css,h5)