移动互联网终端

1、问题描述： 拿到公司里以前写好的网页查看，发现它的CSS中有这样一些东西： /*设备竖屏时的样式*/ @media all and (orientation : portrait){ .video_bg{ position:fixed; z-index: -9999; width: 100%; background: #469BD4; } } /*设备横屏时的样式*/ @media all and (orientation : landscape){ .video_bg{background: #A900B1; position: fixed; right: 0; bottom:0; z-index: -9999; width: 100%; height: 100%; } } @media only screen and (min-width:320px) and (orientation:portrait){ html{font-size:100%;} } @media only screen and (min-width:360px) and (orientation:portrait){ html{font-size:125%;} } @media only screen and (min-width:400px) and (orientation:portrait){

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。 下面这段代码，做过移动端项目的同学一定不会陌生。 假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于 像素，视口，分辨率，meta视口 相关的内容展开叙述。 要实现像素级还原，首先我们要搞清楚什么是像素。 #像素 像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。 乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种 特定颜色 的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。 对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？ //废话 lol ，就是给它设置宽度200px 呗，stupid question..

移动端Web页面适配方案 移动端字体大小 移动端适配 移动端web bolelee 3月20日发布 赞 | 6 收藏 | 67 6.3k 次浏览 更新：完整 js 代码和 sass mixin 已上传于gitHub， 点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。 适配的目标 引用一文章的描述： 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 概念理解 在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。 viewport视口 viewport是严格的等于浏览器的窗口。 viewport 与跟 viewport 有关的 meta 标签的关系，详细建议读一读这篇文章： 移动前端开发之viewport的深入理解 ， viewport 与布局的关系，可以看下这篇文章： 在移动浏览器中使用viewport元标签控制布局

meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先，先来看一下 物理像素 。 以iphone6为例，可知道： 分辨率 ：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。 屏幕尺寸 ：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。 屏幕像素密度 ：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时， 屏幕像素密度 = 分辨率 / 屏幕尺寸 接着，我们来看一下其他的单位。 设备独立像素 ：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是， 物理像素 开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

关于Web纯移动端适配各种手机型号的心得 em与rem的区别 Web纯移动端适配类型 第一种类型的适配 第二种类型的适配 第一次写博客，不喜勿喷，请见谅！！！ em与rem的区别 在讲如何进行适配之前，我觉得很有必要先了解一下em和rem，作为一名前端开发者，不能只停留在px上。 em和rem相对于px来说，它们更加具有灵活性，它们是相对长度单位，也就是说长度不是一成不变的，它们更适用于响应式布局。 em ①如果子元素字体大小是em，那么它是相对于父元素的font-size的。 ②如果元素的width、height、padding、margin、top、left、bottom、right使用的是em的话，那么它是相对于本元素的font-size。 rem rem是全部元素的长度都相对于根元素html的fon-size的。 Web纯移动端适配类型 第一种是手机屏幕必须显示完整个页面，无滚动条，height和width都是100%。 第二种是width是100%、height超过屏幕高度的页面，有滚动条。 关于 本文章里 的所有代码，都是基于Vue.js的。 第一种类型的适配 对于这种类型的适配，使用的单位是em。 需要根据设计稿的高度与屏幕的高度得出比例，然后乘以预先设好的font-size。话不多说，直接上代码… html的head头设置 //index.html //设置head

原文：http://www.cnblogs.com/chris-oil/p/5367106.html 初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3

我在另一篇文章中谈到过一些 移动端分辨率自适应问题 ，主要是基于个人实际开发中遇到的问题提出的解决方法。 近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。 Part 1 理解关于长度单位的一些概念 1、设备像素或逻辑像素 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （还是不理解？？太正常了，接着往下看） 2、CSS像素或设备独立像素 指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt） （这个好理解吧） 3、像素密度（PPI） 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （嘻嘻，=设备像素或逻辑像素） PPI越高，分辨率也就越高 4、像素比（dpr） 设备像素比=设备像素/CSS像素 比如：iPhone6的像素比为2 = 750/375 在开发中，UI设计狮以设备像素制作设计图； 前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页 进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况 以下两种情况都会带来一定的图片不正常的问题 Part 2 关于视口的概念 1、Layout viewport（布局视口） 浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px

常用的抓包工具 常用的抓包工具：本质就是一款服务器，适用于实现请求和响应的拦截 fiddler 默认只可以抓起http协议的请求和响应 https: tools - options - https - detrypt https traffic 含义：将fiddler的证书安装到本地 青花瓷（charles） miteproxy 移动端数据的爬取 配置相关的环境 fiddler的配置： tools-》options-》connections->allow remote conxxx 查看fiddler的端口号，并且记住端口号 测试配置是否生效： 在电脑的浏览器访问： http://localhost:端口号/，如果可以访问成共则表示配置成功 网络设置： 网络设置： fiddler所在的电脑开启一个热点，手机连接热点 保证手机和电脑同处于同一个网段 在手机中安装fiddler的证书 手机浏览器访问： http://电脑的ip:端口号/ 点击下载证书的链接，进行证书下载 在手机中新任且安装证书 开启手机网络代理 wifi-》点击感叹号-》开启代理-》代理的ip就是电脑的ip，端口就是fiddler的端口 移动端自动化 appnium是一个基于手机应用自动化的模块 待补充 来源： https://www.cnblogs.com/zhangdadayou/p/11999976.html

移动端，常见的tab切换效果比较多，今天，我就用cube-ui ，这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候，往往倾向于用路由实现，其实也可以用组件来实现，而且在滑动效果的细节上更加完善。 首先完成tab的切换，使用 cube-tab-bar 这个组件，然后传入一个数组，数组对象中，包含label标签，就是tab的标题。 可以绑定点击事件，onChange事件。 还可以添加样式 设置默认选中 tab切换的同时，主体也相应的切换。 下面说一下比较常见的主体滑动，tab同时切换，而且滑动的比例也相同，这样就是一个比较好的用户体验了。主要涉及到 cube-slide cube-slide-item 这两个组件。 要想完成这个效果，需要依赖于两个事件。 onScroll 和 onChange . onChange 事件用于绑定 tab切换，onScroll 事件主要是来计算滑动比例。 这个滑动比例的难点在比例的计算。必须要强调的一点是众多宽度、高度、坐标的意义的确定。先获取，设置的时候，还需取反，这是根据实际需求来的。 类似效果，其实swiper，等效果都可以实现。 来源： CSDN 作者： 奔跑的小秋 链接： https://blog.csdn.net/lovexiaoqiu/article/details/93890640

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 维护后端代码 学习后端架构 GitHub签入记录 接下来的计划 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 还剩下哪些任务 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 数据安全性问题 有哪些收获和疑问 通过学习软工提高了自我修养 如何高效学习软工？ 组员1：杨晋南 过去两天完成了哪些任务 精进移动端Android界面的实现 完善了移动端Android部分界面间逻辑代码 github签入记录 接下来的计划 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 还剩下哪些任务 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 兼容性问题的研究遇到困难 有哪些收获和疑问 软工使人进步，软工使人快乐 学习了相关开发知识 如何高效学习软工？ 组员2：刘晓翔 过去两天完成了哪些任务 完善了移动端iOS部分界面间逻辑代码