移动互联网终端

目标 拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面： 目标很清晰，就是做一个这样的H5页面。 痛点 虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情： 再来看看手淘H5要适配的终端设备数据： 看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。 手淘团队适配协作模式 早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。 上图来自于 paintcodeapp.com 为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。 而整个手淘设计师和前端开发的适配协作基本思路是： 选择一种尺寸作为设计和开发基准 定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果 还是上一张图吧，因为一图胜过千言万语： 在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px *

四、移动适配 文章目录 四、移动适配 移动端适配 viewpoint视口 媒体查询 参考文章 移动端适配 移动端Web页面，即常说的H5页面、手机页面、webview页面； 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备； 移动端适配的目的：在不同尺寸的手机设备上，页面“相对性的达到合理的展示”或者“保持统一效果的等比缩放”； viewpoint视口 visual viewport：可见视口，即屏幕宽度； layout viewport：布局视口，即DOM宽度； idea viewport：理想适口，使布局视口就是可见视口； visual viewport = layout viewport * scale 获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height 获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height 移动设备默认的 viewport 是 layout viewport，而我们想要的是 idea viewpoint，我们通过使用 meta 标签来实现我们想要的效果。 meta viewport

前言 近期有个项目需求，需要用到拖动事件。由于不需要考虑IE8等低端浏览器的兼容性， 所以想到HTML5中的 drag 事件， 但是发现移动端 android & IOS 并不支持 drag 事件。所有新事物的产生都不是偶然， 所以决定自己去实现一个页面元素的拖动。 实现页面元素的主要思路，是通过监听事件（ touchstart ）判断要拖动的元素并定位该元素； 然后监听移动事件（ touchmove ）判断手指移动的方向距离并将这些参数转换为元素的移动方向距离，通过 transform （当然也可以通过定位 top&left 等）移动元素； 当然有开始就有停下来，所以还要监听结束（ touchend ）事件，在结束的时候进行相应的处理，返回初始位置，或者停在结束的位置。 现在整体思路有了，然后就是一步步的实现。 源代码文件 demo （请在移动端打开或者模拟移动端打开） 手机请扫 js实现拖动操作 初始化 就像盖房子需要打地基一样，写程序实现一个功能需要初始化。 初始化主要是对传入参数处理，然后做一些基本定义。在这里实现的拖动操作， 以将页面元素拖入垃圾箱为背景来进行一系列的操作。 首先， 我们需要定义可操作的元素，即需要被拖动的元素。接下来就是对可操作元素进行操作，这里需要绑定事件，也就是touch事件，包括 touchstart/touchmove/touchend

引子 h5 页面有弹窗浮层时，浮层之下若产生了滚动，滑动浮层时会让其产生滚动。这是 示例页面 ，移动端访问如下： Origin My GitHub 原因 找到的信息里面有两种说法： 使用了 -webkit-overflow-scrolling: touch ，另外这个不是标准属性。 浮层也是页面的一个元素，浮层的展示正常，页面中的其它元素按照本来的方式展示运作。也就是说这是一个正常的现象，只不过是我们不想要这种效果。 针对第一种说法，进行测试验证，这是 示例页面 ，移动端访问如下： 发现：跟 -webkit-overflow-scrolling: touch 无关。 处理方法 在网上找到的资料，主要有两种思路： 阻止 touch 相关的事件。 弹出浮层时，禁止元素滚动，浮层消失时，恢复滚动。 第一种思路在很多资料中提到有明显的缺陷： 弹出层的滚动会有问题。 会锁死滚动区域。 弹出层的事件处理可能会产生影响。 较多采用第二种思路，但也有对应的问题： 元素滚动的状态切换，会丢失滚动的位置。 针对滚动位置丢失问题，采用动态记录滚动位置的方式可以解决。 示例代码 // 以下方法使用的前提是产生滚动元素为 body function fixedEle ( ) { var scrollEle = document . body ; // 有可能出现浮层内切换的情况，已经设置了就用重复设置了。

一、flex布局体验 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 注意：如果是PC端页面的布局，我们还是传统布局；如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。 二、flex布局原理 flex是flexible box的缩写，意为 “弹性布局” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear 和 vertical-align属性都将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性布局 = flex布局 注意：flex布局就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。 来源： CSDN 作者： chowhoundgh 链接： https://blog.csdn.net/qq_43078424/article/details/104114607

手机版项目管理系统软件，也称项目管理软件App，是一款集客户、项目、销售、合同、售后、产品、财务、OA于一体的移动端项目管理系统，管理人员、业务人员、普通员工均可随时、随地、随手使用，Android、iOS、Windows Phone全面支持。适合侧重客户关系、团队管理和项目管理的企业使用。 有了项目管理软件App，管理人员通过移动端可以审批单据、跟踪进度、点评日程、掌控财务、查看报表、智能统计、轻松决策等；业务人员通过移动端可以扫描名片、跟进客户、查询周边客户、在线下单、在线跟单、处理售后、报销费用；企业员工通过移动端可以浏览公告、考勤打卡、上报位置、汇报日程、互动交流等，最大限度提升办公效率。它的核心功能模块如下： 1 、移动客户管理 手机版项目管理软件，通过移动端随时录入、查询用户资料、洽谈进展、销售订单等信息，并支持行动轨迹、用户签到、拍照上传、名片扫描、周边客户、语音检索等先进功能。作为项目的依据和来源，移动客户管理在提高外勤办公效率的同时，确保客户上门拜访等工作的准确执行，先进导航和定位工具，让移动端采集、记录和反馈的信息变得准确、真实、可靠。 2 、移动联系人管理 手机版项目管理软件是可以随身携带的联系人通讯录，即使出门在外没有保存客户联系方式，也不用担心。销售人员随时随地登录App，就可查询联系人电话、手机、生日等信息，并且支持手机、平板端、PC端联系人信息互相导入

爬虫学习 09.移动端数据爬取 前言 随着移动市场的火热，各大平台都陆陆续续的推出了自己的移动端APP来拉拢吸引和便捷其广大的用户。那么在移动端的平台当时势必会出现大量有价值的信息和数据，那这些数据我们是否可以去享用一下呢？那么接下来就进入我们的移动端APP数据的爬虫中来吧。 今日概要 fiddler简介 手机APP抓包设置 fiddler设置 安装证书下载 安全证书安装 局域网设置 fiddler手机抓包测试 今日详情 1 什么是Fiddler? Fiddler是位于客户端和服务器端的HTTP代理，也是目前最常用的http抓包工具之一 。 它能够记录客户端和服务器之间的所有 HTTP请求，可以针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试的利器。 既然是代理，也就是说：客户端的所有请求都要先经过Fiddler，然后转发到相应的服务器，反之，服务器端的所有响应，也都会先经过Fiddler然后发送到客户端，基于这个原因，Fiddler支持所有可以设置http代理为127.0.0.1:8888的浏览器和应用程序。使用了Fiddler之后，web客户端和服务器的请求如下所示：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLJF8Tnr-1578575735709)

黑马程序员：从零基础到精通的前端学习路线 随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！ 那么前端开发到底需要学什么？应该怎么学？接下来黑马程序员前端学院教你如何从零基础学习前端。 一、前端开发入门 在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 在这个阶段你需要学习： 1、HTML+CSS基础 掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。 这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。 二、前端开发初级 在接下来的这一个阶段

说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。 一 什么是移动端页面 首先 不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、手机页面、以及webview页面。 移动端的兴起，访问的流量很大一部分都来自于手机，而通常当手机访问页面的时候，每台设备的分辨率、型号、屏幕尺寸都不一致，导致移动端的兼容适配成为一个很难忽视的问题。 为了让设计稿在大部分设备上都能有相对满意的效果，尤其是在移动端，显然在pc端的px计算像素的方式已经不适用。 二 几个名词 1 viewport 现在开发的页面主要集中在H5页面这个方向，而说到移动端页面，就必须要提到viewport. 先说用到哪，再说是什么、为什么这么用。 随便打开一个线上的H5的页面，你都会在head里发现这个标签<meata name="viewport" content="initial-scale=..., maximun-sacle=..., minimun-scale=..., user-scalable=no"> 金融商城H5端 淘宝移动端 所有的移动端页面都用到了这个属性，那么这个属性的定义是什么？ 我们知道手机的分辨率各有各的不同，很难做到一套代码，所有的机型都适配，再加上一些历史的原因，浏览器对移动端的属性支持力度不同

一、什么是字体反爬？ 　　字体反爬就是将关键性数据对应于其他Unicode编码，浏览器使用该页面自带的字体文件加载关键性数据，正常显示，而当我们将数据进行复制粘贴、爬取操作时，使用的还是标准的Unicode字符映射，解析后就是干扰性数据，以猫眼电影为例： 上图表明，浏览器正常渲染的数据在调试界面显示为错误的数据，即使我们复制粘贴也是这样（猜测复制粘贴的是Unicode编码）显示，这样就起到了反爬的效果。 二、解决方案 　　1、找到对应的字体文件 点击箭头指向的css文件 箭头指向的链接就是我们要寻找的字体文件，我们必须把这个字体文件下载下来进行分析，找到对应关系 如果字体文件是固定的，我们可以手动分析，然后创建一个映射表就解决了，但是字体文件如果每请求一次就会变化，这种解决方式就不行了。 我们刷新一下链接，再下载一个字体文件对比一下，看是否变化了 对比后，不难发现，字体文件完全不同了。 　　2、绕过字体反爬 目前为止，我爬过的数据从来源可以分为PC端数据、移动端Web数据和APP数据，既然PC端有字体反爬，我们可以从移动端尝试一下。 先从简单的移动端Web数据入手，可以先使用selenium，加一个手机浏览器的User-Agent，就可以在PC端浏览器显示与手机浏览器相同的效果，下图表示在移动端Web数据是没有使用字体反爬措施得。 1 from selenium import