移动Web_chrome emulation-CSDN博客

本文链接：https://blog.csdn.net/a50610/article/details/47803309

调试

浏览器模拟-chrome Emulation

路径：chrome->F12开发者工具->show drawer(右上角小按钮)->Emulation
开发者工具左上角手机图标，点击后进入模拟预览页面图标位置
可设置机型，自定义屏幕大小及Device pixel ratio。

还可以通过开发者工具Settings->Devices->Emulation devices隐藏机型或添加自定义机型。

总结：机型较丰富（手机/平板，苹果/三星/nexus/nokia/..），可模拟尺寸，touch，网络等，但是字体和实际真机有差距。适合用于快速预览不同屏幕布局。

真机调试-chrome

USB连接设备，设备：开发者选项->允许USB调试。
PC：chrome直接访问地址：chrome://inspect/#devices
Open tab with url可输入网址，使设备打开链接。
页面列表中，可在设备中查看或聚焦页面。

项目端口号非80解决方案：

nodeJs开服务，指定端口号，
端口模拟：
Port forward…->输入端口号及IP（localhost）->勾选Enable->Done
设备名称后面，端口号图标为绿色为正常，红色为无法访问

总结：可在设备上操作网页，看网页实际效果，可在页面模拟操作，可审查元素。适用于实际调试、测试。

动画

声明动画

首尾：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

多段

@keyframes myfirst
{
%0{}
%5{}
%100{}
}

选择器绑定

div {
    animation: name 1s linear 500ms 1 alternate;
}

语法

animation: name duration timing-function delay iteration-count direction;

属性	描述	值
animation-name	keyframe 名称	无
animation-duration	完成动画时间 s/ms	1s
animation-timing-function	速度曲线	ease linear ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
animation-delay	开始延迟	0 1s
animation-iteration-count	播放次数	1 2 3 infinite
animation-direction	偶次数反向播放	normal alternate
animation-play-state	动画状态	running paused
animation-fill-mode	动画前后状态	none forwards backwards both

兼容

@keyframes name
@-moz-keyframes name/* Firefox */
@-webkit-keyframes name/* Safari 和 Chrome */
@-o-keyframes name/* Opera */

animation: name time;
-moz-animation: name time;  /* Firefox */
-webkit-animation: name time;   /* Safari 和 Chrome */
-o-animation: name time;    /* Opera */

滑屏框架

控制父容器-slip

Demo
slip.min.js
github
总结：pc端也可以滑，不支持嵌套，不支持滑屏增加事件，不支持滑屏动画。js少，适合简单的滑屏。

控制子容器-fullPage

Simple Demo
嵌套Demo
fullPage.min.js
github
滑屏操作时，实际上是增加或删去class，所以需定义以下css

.page {
    box-shadow: 1px 1px 4px 0 #000;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.contain {
    width: 100%;
    height: 100%;
    display: none;
    position: relative;
    z-index: 0;
    padding-top: 70px;
}
.current .contain,.slide .contain {
    display: block;
}
.current {
    display: block;
    z-index: 1;
}
.slide {
    display: block;
    z-index: 2;
}
.swipe {
    display: block;
    z-index: 3;
    transition-duration: 0ms !important;
    -webkit-transition-duration: 0ms !important;
}

html结构

<div id="pageContain">  
    <div class="page page1 current">
        <div class="contain">
            <!-- your own code here-->
        </div>
    </div>
    <!-- ect.. -->
</div>

<!--alternative-->
<ul id="navBar">
    <li>0</li>
    <!-- ect.. -->
</ul>
<!--alternative-->

var runPage = new FullPage({

  id : 'pageContain',                            // id of contain
  slideTime : 800,                               // time of slide
  continuous : false,                            // create an infinite feel with no endpoints
  effect : {                                     // slide effect
          transform : {
            translate : 'Y',                      // 'X'|'Y'|'XY'|'none'
            scale : [.1, 1],                      // [scalefrom, scaleto]
            rotate : [0, 0]                       // [rotatefrom, rotateto]
          },
          opacity : [0, 1]                       // [opacityfrom, opacityto]
      },                           
  mode : 'wheel,touch,nav:navBar',               // mode of fullpage
  easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
    //  ,onSwipeStart : function(index, thisPage) {   // callback onTouchStart
    //    return 'stop';
    //  }
    //  ,beforeChange : function(index, thisPage) {   // callback before pageChange
    //    return 'stop';
    //  }
    //  ,callback : function(index, thisPage) {       // callback when pageChange
    //    alert(index);
    //  };
});