美文网首页
移动端重构

移动端重构

作者: 豆豆猫1031 | 来源:发表于2018-01-16 20:41 被阅读0次

    目录:
    1.新建空白页 meta标签相关
    2.整体布局

    1.新建空白页 meta标签相关

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    上面的代码依次表示设置视口宽度为设备的宽度,默认不缩放,不允许用户缩放(即禁止缩放),在网页加载时隐藏地址栏与导航栏(ios7.1新增)。
    相关参数:
    width – // [pixel_value | device-width] viewport 的宽度,范围从 200 到 10,000,默认为 980 像素
    height – // [pixel_value | device-height ] viewport 的高度,范围从 223 到 10,000
    initial-scale – // float_value,初始的缩放比例 (范围从 > 0 到 10) (值越大是放大)
    minimum-scale – // float_value,允许用户缩放到的最小比例
    maximum-scale – // float_value,允许用户缩放到的最大比例
    user-scalable – // [yes | no] 用户是否可以手动缩放
    target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度
    DEMO: http://output.jsbin.com/ceqexapa/8

    <meta name="apple-mobile-web-app-capable" content="yes" />
    是否启动webapp功能,会删除默认的苹果工具栏和菜单栏。

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    当启动webapp功能时,显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection"content="telephone=no, email=no" />
    忽略页面中的数字识别为电话号码 电子邮件识别

    其他常用meta:

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="HandheldFriendly" content="true">

    <meta name="MobileOptimized" content="320">

    <meta name="screen-orientation" content="portrait">

    <meta name="x5-orientation" content="portrait">

    <meta name="full-screen" content="yes">

    <meta name="x5-fullscreen" content="true">

    <meta name="browsermode" content="application">

    <meta name="x5-page-mode" content="app">

    <meta name="msapplication-tap-highlight" content="no">

    如果apple-mobile-web-app-capable设置为yes了,那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。而通过设置相应apple-touch-icon标签,则添加到主屏上的图标就会使用我们指定的图片。
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    图标使用的优先级如下:

    • 如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大,但最接近推荐尺寸的图标。
    • 如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标。
    • 如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。

    同样基于apple-mobile-web-app-capable设置为yes,可以用WebApp设置一个类似NativeApp的启动画面。
    <link rel="apple-touch-startup-image" href="/startup.png">

    apple-touch-icon不同,apple-mobile-web-app-capable不支持sizes属性,所以使用media来控制retina和横竖屏加载不同的启动画面。
    // iPhone
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
    // iPhone Retina
    <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    // iPhone 5
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
    // iPad portrait
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
    // iPad landscape
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
    // iPad Retina portrait
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    // iPad Retina landscape
    <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

    总结
    空白页面模板,然后再根据具体情况在此基础上添加apple-touch-icon和apple-touch-startup-image
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <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" />
    <title>Document</title>
    </head>
    <body> </body>
    </html>

    2.整体布局

    fixed布局:
    <header class="header fixed-top">
    </header>
    <div class="wrap-page">
    <section class="page"></section>
    <section class="page"></section>
    ...
    </div>
    <footer class="footer fixed-bottom"></footer>

    考虑到可滚动的为page内容,所以我们得给wrap-page一个具体的高度,然后使用原生的-webkit-overflow-scrolling:touch;

    结构优化(智能识别padding)(兼容性不好 高版本)

    <header class="header fixed-top"></header>
    <footer class="footer fixed-bottom"></footer>
    <div class="wrap-page">
    <section class="page"></section>
    <section class="page"></section>
    ...
    </div>

    这样我们就可以采用兄弟选择器,设置上下的padding:

    .header ~ .wrap-page {
    padding-top: 44px;
    }
    .footer ~ .wrap-page {
    padding-bottom: 44px;
    }

    .header-sub ~ .wrap-page { padding-top: 88px; } //双层头部写法
    所以如果我们采用这种布局,header和footer绝对不能采用显示显示隐藏的方式来搞,而应该采用替换形式,没有则删除。
    
    绝对定位布局
    
    

    .header,.footer,.wrap-page{
    position:absolute;
    left:0;
    right:0;
    }
    .header,.footer{
    height:44px;
    background-color: #fff;
    text-align: center;
    z-index:900;
    line-height:44px;
    }
    .header{
    top: 0;
    border-bottom: 1px solid #f00;
    }
    .footer{
    bottom: 0;
    border-top: 1px solid #f00;
    }
    .wrap-page{
    top: 44px;
    bottom: 44px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    }
    .page{
    padding: 10px;
    }
    .page p{
    margin-bottom: 10px;
    }

    
    这个布局的缺陷在于滚动的时候地址栏不隐藏,safari浏览器可以通过下面js代码来隐藏地址栏,其他浏览器经测试不可以
    
    

    window.addEventListener('load', function(){
    setTimeout(function(){ window.scrollTo(0, 1); }, 100);
    });

    
    flex 布局
    
    

    body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    }

    .wrap-page {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    }

    .header,.footer{
    height:44px;
    background-color: #fff;
    text-align: center;
    line-height:44px;
    position:relative;
    z-index:990;
    }
    .header{
    border-bottom: 1px solid #f00;
    }
    .footer{
    border-top: 1px solid #f00;
    }
    .wrap-page{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    }
    .page{
    padding: 10px;
    }
    .page p{
    margin-bottom: 10px;
    }

    
    ## 总结
    
    fixed滑动式有bug flex兼容性不好 所以一般用绝对布局
    
    
    
    
    
    

    相关文章

      网友评论

          本文标题:移动端重构

          本文链接:https://www.haomeiwen.com/subject/zyfsoxtx.html