移动互联网终端

　　本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能： 　　　　纠错声明：网上查阅资料看到很多人都将vux和vuex弄混，在这里我们先解释一下，vuex是vue框架自带的组件，是数据状态管理工具，vux是一款移动端的UI组件库； 　　　　 　　　　vux（官方文档： https://doc.vux.li/zh-CN/ ）是基于WeUi和vue（2.x）开发的移动端的UI组件库，主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi，vux在WeUi的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUi的设计规范。 　　　　首先我们需要安装vux的依赖包，命令如下： 　　　　　　npm install vux --save　　 　　　　官方文档声明了vux必须配合vux-loader一起使用，所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置： const vuxLoader = require('vux-loader') const webpackConfig = originalConfig /

　　 本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能： 　　　　纠错声明：网上查阅资料看到很多人都将vux和vuex弄混，在这里我们先解释一下，vuex是vue框架自带的组件，是数据状态管理工具，vux是一款移动端的UI组件库； 　　　　 　　　　vux（官方文档： https://doc.vux.li/zh-CN/ ）是基于WeUi和vue（2.x）开发的移动端的UI组件库，主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi，vux在WeUi的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUi的设计规范。 　　　　首先我们需要安装vux的依赖包，命令如下： 　　　　　　npm install vux --save　　 　　　　 官方文档声明了vux必须配合vux-loader一起使用，所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置： const vuxLoader = require('vux-loader') const webpackConfig = originalConfig

【背景】 弱网测试，属于健壮性测试的内容。随着国内移动端迅猛发展，大大增加用户碎片化使用移动端的概率。想象一下，用户在地铁里，巴士上，甚至是电梯，车库等场景使用APP，我们就需要针对这些场景的弱网环境下，验证出现丢包、延时软件的处理机制，避免因用户体验不友好造成用户的流失。 1.用户体验 APP使用过程中，弱网的高延迟和高丢包，在实时性要求非常高的场景，容易伤害用户体验 2.非正常情况下，出现bug概率会增加 在解决日常的支持需求中，经常会遇到一些用户反馈一些无法简单复现的bug，有很大一部分的bug是由于用户自身的网络环境波动，或者是本身网络环境就较为恶劣，而服务在面对这种恶劣的网络环境的健壮性不够，导致会出现一些意想不到的bug 【原理】 使用代理捕获网络信号进行环境部署来分析APP的延迟（加载）时间、内容，提出HTTP优化建议，让开发者能够在APP上线前提前预知app在较差网络环境下的表现，以便提前发现问题，进行有针对性优化。让APP在任何网络情况下，都能表现自如，出类拔萃 核心流程 网络请求—》代理proxy—》进行目标操作（修改返回值&延迟&丢包等）—》返回给移动端（见下图） 网络代理原理图 【模拟方法】 当前模拟恶劣网络环境主要可以通过以下这些手段实现： 通过应用层或者传输层的代理服务器，通过在代理服务器上设置一些模拟恶劣网络环境的参数

jmeter录制脚本有两种方式，一种借助外部工具badbody,一种是本身的功能，使用代理服务器，介绍下如何使用代理服务器录制脚本。我一般在测app或者移动端H5页面时才会录制，所以此文也针对移动端。 操作： 1.打开jmeter，设置代理服务器，具体操作如图 2.为测试计划添加一个线程组 3.代理服务器的设置： 设置端口：自己设置，8888,8080…都可以 目标控制器：选择你刚刚添加的线程组（等会录制的脚本会放到这里） 分组：选择“每个组放入一个新的控制器”（看个人选择吧，其实都可以，我选择的这个选项会将你录制的脚本分组，看起来更明了） 【不对样本分组：所有请求全部罗列 在组间添加间隔：加入一个虚拟的以分割线命名的动作，运行同“不对样本分组”，无实际意义 每个组放入新的控制器：执行时按控制器给输出结果 只存储每个组的第一个样本:对于一次url请求，实际很多次http请求的情况 】 HTTP Sample settings:我选择HttpClient4(他们几个具体有什么不同我暂时还没研究) 代理服务器排除模式的正则：.*.(bmp|css|js|gif|ico|jpe?g|png|swf)，他会排除你录制的的脚本中的css 、 js 图片等文件，这个还挺重要的，不过据说最新版jmeter自带拦截功能 4.为代理服务器添加监听器----查看结果树

合肥SEO ：合肥网站移动端SEO分为移动SEO优化和移动SEO排名技术，移动端seo优化和排名技术怎样完成?通常情况下，PC端SEO排名出现，移动SEO是呈上升趋向的，但是很对seo优化人员对移动端的优化和排名了解的不够透彻，下面就让合肥SEO小编带大家来理解一下合肥移动SEO排名的技巧，一同来看看吧： 很多seo优化人员在PC端的优化排名技巧上很凶猛，但是一到移动端上就凉了，就比方简单的PC端内容转跳到移动端上面等等。 从大数据剖析来看，目前中国的手机用户已达数亿，有超越五分之二的移动端用户都有应用手机访问网页的习气。从另一项数据得知，目前针对移动端特地设置的网站并对其中止排名优化的网站数量屈指可数。 在这里，请大家留意：百度移动端网站的排名优化并不是简单的将PC站点内容复制过来。 在中国，搜索引擎百度一家独大，我们做移动端排名与优化的时分，更多的是思索如何做百度的移动端流量，需求控制的是迎合百度的排名技巧。 合肥SEO：百度移动排名优化技巧有哪些?总结如下： 1、网站页面设计 PC端也好，移动端也好，我们所做的最终结果是将网站的内容，以合理的排名，合理的界面呈现给阅读网站网页的人群。因而，移动端网站页面的设计就尤为重要。需求留意的优化技巧包括少用或遏止运用FLASH，JS等看似炫目，实则降低搜索引擎友好度的元素。 2、百度移动适配声明 针对不同的站点，予以特定的适配声明

原文地址： What Exactly Is..... The 300ms Click Delay 快速响应是所有 UI 实现的重中之重。研究表明，当 延迟超过 100 毫秒 ，用户就能感受到界面的卡顿。 然而，出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。 本文主要讨论上述延时的来历，浏览器生产商的考虑，以及我们作为开发者，当前应该如何处理这个问题。 300 毫秒延迟的来历 这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览 桌面端 站点的问题。 这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。 双击缩放 双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 下面以这篇 网站响应时间的文章 页面为例，刚一打开页面，除了文章本身，我们还看到顶部通栏、菜单等非关键性要素。 我们进入这个页面的目的显然是为了阅读这篇文章。所以当我们双击屏幕时，Safari 会相当智能地缩放至主体文章。 上述例子表明，iOS Safari 在双击后

移动端300毫秒延迟的由来： 　　双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。 解决方案： 　　　　1、设置meta标签禁止缩放 @1 <meta name="viewport" content="user-scalable=no"/> <meta name="viewport" content="initial-scale=1, maximum-scale=1">/ 表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。 这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。 @2 <meta name="viewport" content="width=device

背景 今年3月份的时候新入职了一家公司有需求要做自己公司APP上面的小程序。就是类似于微信小程序那种结构。 其中有遇到了一个问题，就是移动端的适配问题，之前我一直用的rem的适配方案（ 不知道的可以点这里 ），也没有什么太大的问题。但是又想着都 9102 了会不会有点捞～于是就找找看看有没有更好的替代方案（结合时代的）。 响应式 Web 设计 - Viewport 什么是 Viewport ？ viewport是用户网页的可是区域。翻译中文就是“视区”，手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 关于 Viewport 的三个理论 来自于 PPK(Peter-Paul Koch) 关于 viewport 的三个观点（ so~1 , so~2 , so~3 ），有很多文章的观点都出自那里（包括本文）。 layout viewport （布局视区）：在移动端浏览器上面，视觉视区限制了布局视区，为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为980px或其他值，一般都比移动端浏览器可视区域大很多

　 此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 　　在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。 　　目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的 实现。根据查看caniuse，本demo里使用到的FileReader、Blob、Formdata对象均已在大部分移动设备浏览器中得到了实现 （safari6.0+、android 3.0+），所以直接在前端压缩图片，已经成了很多移动端图片上传的必备功能了。 　　在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。逻辑并不难。整个过程就是： 　　（1）用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式） 　　（2）把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩 　　（3）获取到压缩后的base64格式图片数据，转成二进制塞入formdata

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1、关闭iOS键盘首字母自动大写 <input type="text" autocapitalize="off" /> 2、禁止文本缩放 html { -webkit-text-size-adjust: 100%; } 3、移动端如何清除输入框内阴影 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： input, textarea { border: 0; -webkit-appearance: none; } 4、忽略页面的数字为电话，忽略email识别 <meta name="format-detection" content="telephone=no, email=no"/> 5、快速回弹滚动 .xxx { overflow: auto; -webkit-overflow-scrolling: touch; } PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址： http://www