移动互联网终端

移动开发不同与PC端开发，可能会经历各种意想不到的问题，尤其是移动端应用刚起步的几年；随着移动互联网的快速发展，有些问题已经得到了很好的支持，如1像素边界的问题。当然，要更好地解决这些移动端的问题，就需有移动端领域相关的知识，下面就来说说。 dpr设备像素比 首先说一下，这个dpr不仅仅是移动端才有的，pc端也有，但是对一些移动端的问题产生的原因及解决显得比较重要，比如1像素的问题。先来看几个概念： 物理像素（physical pixel） 一个物理像素就是显示设备上最小的物理显示单元，每个物理像素都有自己的颜色值和亮度值。例如iphone6手机屏幕有750*1334个物理像素 设备独立像素（density-independent 设备独立像素又叫密度无关像素，也可以叫逻辑像素，程序使用的虚拟像素如css像素，可以理解为显示设备坐标系统中的一个点； 设备像素比dpr（device pixel ratio) 设备像素比，简称dpr，定义了物理像素与设备独立像素之间的对应关系，具体的对应关系是一个计算公式如下： dpr = 物理像素 / 设备独立像素 上面计算的dpr是指某一个方向上如x或者y方向，二者dpr值相同；程序中获取dpr方式如下： js获取dpr使用 window.devicePixelRatio css获取dpr使用 -webkit-device-pixel-radio

虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug，和一些定位写法 css js放置位置和原因 什么是渐进式渲染 html模板语言 meta viewport原理 2.CSS 盒模型，box-sizing CSS3新特性，伪类，伪元素，锚伪类 CSS实现隐藏页面的方式 如何实现水平居中和垂直居中。 说说position，display 请解释*{box-sizing:border-box;}的作用，并说明使用它的好处 浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值 link和@import引入css的区别 解释一下css3的flexbox，以及适用场景 inline和inline-block的区别 哪些是块级元素那些是行级元素，各有什么特点 grid布局 table布局的作用 实现两栏布局有哪些方法？ css dpi 你知道attribute和property的区别么 css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？ 流式布局如何实现，响应式布局如何实现 移动端布局方案 实现三栏布局（圣杯布局，双飞翼布局

更新说明：1.02版本采用show属性值控制组件的显示与隐藏，不再使用v-if！！ 安装：npm install -s w-previewimg 或 yarn add w-previewimg 在线预览地址： https://wenyuming.github.io/w-demos/dist/index.html#/previewimgDemo 预览时请按f12，在移动端模式下预览 由于预览网址带宽比较低，加载图片会比较慢，等图片都加载完才能完整体验，耐心等一下哦。 操作说明：左滑右滑切换图片，单击预览图片关闭预览，此插件只使用于移动端。 效果图： html部分： <template> <div style="text-align:center"> <div v-for="i in imgs" style="width:100px;height:100px;display:inline-block;margin-left:10px;margin-top:10px"> <img :src="i" alt="" style="display:inline-block;width:100%;height:100%" @click="showBigImg(i)"> </div> <wimg :show="isShowBigImg" :imgs="imgs" :currentImg=

zepto Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery github地址: https://github.com/madrobby/zepto 官方地址: http://zeptojs.com/ 中文版地址: http://www.css88.com/doc/zeptojs_api/ 注意点: Zepto的设计目的是提供 jQuery 类似的API，但并不是100%覆盖 jQuery jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的； 官网下载的zepto,就已经包含了官网所述的默认模块了 github上下载的zepto模块需要自己导入 // <!–引入核心模块；包含许多jQuery中常见方法–> <script src="js/zepto.js"></script> //<!–引入zepto事件模块, 包含了常见的事件方法on/off/click ...–> <script src="js/event.js"></script> // <!–引入zepto动画模块,–> <script src="js/fx.js"></script> // <!–引入zepto动画模块的常用方法,–> <script src="js/fx_methods.js"></script> zepto点击事件

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。 基本概念和原理 首先要了解的重要的基础知识点：物理像素，设备独立像素，设备像素比，css像素，布局视口，可视视口,理想视口以及css单位rem。 物理像素（设备像素） 屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr

本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（ 手淘 ， 美柚 ）。这些app中都嵌者数以百计，千计的h5网页。 背后他们开发这些h5的框架是怎么样的呢？ 或许你也想开发一些h5，或者简单的react，vue应用，做些广告，做些互动和营销，发布到微信朋友圈传播， 那如何快速的搭建和发布这些h5呢？ 或许你是前端工作不久的初学者，搭建这样的多页h5网站， 怎么样的架构才是正确的打开方式呢？ 或许你想学习下充斥耳边的 webpack,vue,nodejs,es6,MERN框架的另类玩法 ，那这篇文章也适合你！ 最重要的是，你烦透了 移动端适配，移动端性能优化 ，你只想专注于功能开发，那这篇文章就是为你而准备的！ 如果让你现在从零开始搭建工程开发一个h5页面并且发布到线上，需要多久？ 滴答滴答滴答！～ 你可能需要做以下这些事件?？ 搭建服务端工程，分好目录结构，配置要数据库mysql，mongodb，redis; 搭建前端工程，划分目录结构 前端，服务端划分dev，test，prod环境 前端配置webpack做编译，多个h5是多页面的，可能你还要倒腾下webpack多页面的配置方案 好了，可以开始开发了，mobile h5还有适配问题

before 在appium之前，还需要进行一些必要的环节......... 移动端测试是什么？ 移动端测试是指对移动端应用进行的测试，测试应用功能是否满足特定的需求。 移动端测试分类 APP功能测试。 APP自动化测试。 APP安全测试。 APP功能测试 APP功能测试主要包含： 业务逻辑测试： 依据产品的设计文档，设计测试用例。 再加上一些隐性的需求测试，比如产品文档中没有涉及到的。 兼容性测试： 系统版本： Android：原生Android系统及定制版本。 ios：原生系统。 分辨率： 主要关注图片的分辨率， 720 * 1280 、 1920 * 1080 ，一般公司会根据分辨处理图片。 网络情况：2G、3G、4G、WiFi，比如在2G网络环境，应用会不会特别慢，或者卡死等。 异常测试： 热启动应用：应用前后台切换的过程。 网络切换：WiFi --> 4G，应用应处于可用状态。 中断恢复：WiFi --> 断网 --> 4G，处于下载中的应用，怎么处理？断点续传？还是等待WiFi下载？ 电话：比如正在看片片，突然来个电话，接完电话后，返回应用，此时的应用处于什么状态？ 信息：玩游戏中，弹出了一个消息提示，不应该影响游戏。或者查看消息后在回来，游戏处于什么状态。 升级安装卸载测试： 升级：临近版本升级（1.0 --> 1.1），跨版本升级。 安装： 首次安装。 卸载安装。

原文地址： http://www.333cn.com/shejizixun/201839/43495_145847.html 写在前面 近年来，随着科学技术的发展，终端的分辨率越来越多，响应式的设计氤氲而生。然而，作为设计师，你是否遇到过这样的情况：当你设计响应式网站的时候，由于不了解其规范及实现原理，而根据自己的理解设计出了一套设计稿。然而，当这份设计稿放到开发面前时，却发现很多你考虑得很美好的设计方案难以被开发，最终无法还原设计稿的效果。 本文围绕响应式的设计方法来写，重点简述流式网格、元素切换、响应式样式。看完本文，有助于你设计出兼容性更强，对开发友好的响应式设计。对缩短项目的开发周期，降低项目的开发、维护成本，推动项目落地有一定的帮助。 首先，我们先来了解几个概念。这几个概念有涉及到设计，也有涉及到开发。当然，我们的目的不是学习开发技术，而是通过对这些概念的了解，更好的掌握响应式设计的方法。 1. 响应式布局 响应式布局是Ethan Marcotte在2010年提出的概念。他认为，一个网站能够兼容多个终端 (指不同分辨率，不同Dpi的显示设备) ，而不是为每一个终端做一个特定的版本 ，这样的网站布局方式即称为响应式布局。 由于科技的迅速发展，终端设备的分辨率越来越多样化，响应式布局正是为此而生，其目的是确保一个页面在所有终端上都能呈现出令人满意的效果。

做网页时，需要得到当前打开网页页面的设备是PC的浏览器，还是移动设备的浏览器，再针对不同设备，让页面显示合适内容； 针对这个需求场景，个人认为有三种方法可以实现： 方法一： 通过css ； 方法二，通过js； 方法三 通过 php端； 这三种方法按业务需求，进行采用，会有不一样的效果； css 通过 @media 属性 ，设置不一样屏幕尺寸 显示不一样的页面；达到页面匹配不同尺寸的效果； 通过js 判断设备是移动设备，pc设备、微信客户端等，再做对应的跳转到合适的业务页面展示给客户端； 方式三，通过php端判断 访问的设备是 pc还是移动设备； 后端返回 不一样的业务内容； 个人觉得方式三 适合复杂的，业务需求。 下面就 提供一个 php端 判断设备的代码吧。 /** * 是否移动端访问访问 */ public function _is_mobile() { if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 return true; } elseif (isset ($_SERVER['HTTP_USER_AGENT'])) { // 判断手机发送的客户端标志,兼容性有待提高 $clientkeywords = [ 'nokia', 'sony', 'ericsson',

一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站 CDC 腾讯用户研究与体验设计部 FEX 百度Web前端研发部出品 淘宝前端团队（FED） 用技术为体验提供无限可能 凹凸实验室 京东用户体验设计部出品 奇舞团 奇虎360旗下前端开发团队出品 阿里巴巴国际UED团队 在更新的屏幕里创造出更好的产品和更优的体验 EFE 由百度多个遵循统一技术体系的前端团队所组成 UXC 覆盖了百度85%以上的产品体验设计 二、开发社区 网站 说明 StackOverflow 加入世界上最大的开发者社区 SegmentFault 中文领域最大的技术问答交流社区平台 知乎 中文互联网最大的知识分享和社交平台 开源中国 目前国内最大的开源技术社区 w3ctech 中国最大的前端技术社区 掘金 一个帮助开发者成长的社区 V2EX 创意工作者们的社区 博客园 一个面向开发者的知识分享社区 CNode 国内最大最具影响力的 Node.js 开源技术社区 Ruby China 由众多爱好者共同维护的 Ruby 中文社区 三、前端门户 网站 说明 前端网 一个专注于Web前端开发行业的综合性门户网站 大前端 一个集前端开发和Wordpress内容为一体的双轨独立网站 四、前端大牛