viewport

一、课程大纲 1. 基础事件 touchstart touchmove touchend 2. event对象 取消默认事件 阻止冒泡 防止文字选中和阻止默认菜单 鼠标事件延迟 事件点透问题 3. touchEvent touches changedTouches targetTouches 4. 滑屏处理 拖拽原理分析 滑屏幻灯片简版 5. transform2D变换 rotate() scale() skew() translate() left和 top引起的回流问题及优化 处理 transform中不能通过计算计算后样式获取的问题 6. transition动画 transtion基本知识点 贝塞尔曲线运动 transitioned事件 transition不执行的 bug 7. 实例 移动端版音悦台首页制作 rem布局适配 横竖屏切换适配 fixed定位的 bug及替代方案 滑屏导航缓冲回弹动画的实现 完整版无缝滚动的滑屏幻灯片 滑屏选项卡 8. transform3D 滑动旋转的方块 3d多边体制作 正 n边形的外角计算与正 n边形的中心点计算 9. 3d桌面切换 百分比适配怪异盒模型布局适配 animation的 loading动画 立体三棱柱制作 页面绝对坐标获取 ios下 3d变换 的兼容问题及解决方案 10. 二、基础知识 1. 像素 iphone5 640

1、使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的 "窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 viewport标签极其属性： 每个属性的详细介绍： 属性名 取值 描述 width 正整数或 device-width 定义视口的宽度，单位为像素 height 正整数或 device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于 maximum-scale设置 maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于 minimum-scale设置 user-scalable yes/no 定义是否允许用户手动缩放页面，默认值 yes 2、使用css3单位rem

引子 使用 position transform 实现从右边滑出的 h5 浮层效果，但在手机浏览器上左右滑动时，页面产生了左右滚动条，浮层也出来了。这是 问题页面 ，移动端访问如下： 这个现象不应该出现，问题好解决，但为什么会这样？想了一下，好像知道相关点，但又讲不清，所以在此梳理一下。 Origin My GitHub 原因 产生了滚动，很自然的就会想到 overflow 属性，那么就先来了解一下。 overflow 属性指定了块容器元素的内容溢出时是否被剪裁，是 overflow-x 和 overflow-y 的简写。 Name overflow 可取值 visible 默认值 visible 适用于 块级容器和建立了格式化上下文的盒子 继承性 无 visible ：这个值表示内容不会被剪切，可能会在盒子之外渲染。 hidden ：这个值表示内容被剪切，并且不应提供滚动用户界面来查看剪裁区域之外的内容。 scroll ：这个值表示内容被剪切，并且如果用户代理使用在屏幕上可见的滚动机制（例如滚动条或窗格），则无论盒子中的任何内容是否被剪裁，都应为盒子显示该机制。这是为了避免滚动条在一个动态环境中，出现和消失造成的任何问题。当指定这个值且目标媒介是打印时，溢出的内容可能会被打印，也可能不会打印。当用在 table boxes 时，这个值跟 visible 作用一致。 auto

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试在移动终端上的效果。 调试工具 首先我们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入如下的界面: 接下来点击右下方圈红的部分,可以调出另一个控制台,如下界面: 选择某个Device-设备,点击Emulate,之后重新刷新页面即可看到效果,这里我选中iphone5,具体效果如下： 可以知道的是天猫是做了移动端的适配的。 支持移动端 知道了如何进行调试之后,如何支持移动端呢。这里主要是通过Viewport来实现移动端的适配的。其实仔细观察一些使用HTML5开发手机应用或手机网页时,我们可能（有些可能不是通过viewport来实现适配的）会发现如下代码： <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 那么Viewport是什么呢? 手机浏览器是把页面放在一个虚拟的窗口