一、移动web基础京东双十一销售额-PC:26%-移动端:74%主流移动站点-京东商城手机版-淘宝触屏版-苏宁易购手机版(结构:轮播图、导航栏、产品信息)移动端浏览器-UC浏览器-QQ浏览器-百度浏览器-Safari浏览器(都是基于webkit内核)案例《京东商城》首页(页面制作和JS效果)商品分类(页面制作和JS效果)PC端的开发技术可以实现吗?不是兼容问题，更多面对的是适配问题。解决方案:在《

01.移动端基础1.1浏览器现状1.2手机屏幕现状1.3常见移动端屏幕尺寸1.4移动端调试方法1.5总结02.视口2.1布局视口layoutviewport2.2视觉视口visualviewport2.3理想视口idealviewport2.4总结2.5meta视口标签2.6标准的viewport设置03.二倍图3.1物理像素&物理像素比3.2多倍图3.3背景缩放background-size3.

flex布局原理（弹性布局）：采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。使用flex容器内元素，即flexitem的float，clear、vertical-align属性将失效！！！总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。常见属性：1、fl

四、ReactNativeReactNative里面没有webview，它不是Hybridapp，里面执行JS是用的JavascriptCore。把Nativecode十来个最基本核心的类（RCTDeviceEventEmitter、RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等）封装成

实际开发中的像素：css像素设备像素比dpr=设备像素/css像素标清屏dpr=1高清屏dpr=2缩放改变的是css像素大小PPI（每英寸的物理像素点）=根号（屏幕横向分辨率²+屏幕纵向分辨率²）/屏幕对角线长度（单位英寸）视口viewportconsole.log(window.innerWidth);//窗口文档显示区宽度console.log(document.documentElement

实际开发中的像素：css像素设备像素比dpr=设备像素/css像素标清屏dpr=1高清屏dpr=2缩放改变的是css像素大小PPI（每英寸的物理像素点）=根号（屏幕横向分辨率²+屏幕纵向分辨率²）/屏幕对角线长度（单位英寸）视口viewportconsole.log(window.innerWidth);//窗口文档显示区宽度console.log(document.documentElement

《HTML5移动Web开发实战》《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书，你将了解

Webapp，Nativeapp和HybridappHybrid是混合模式开发，介于webapp和native之间，各个手机终端能够公用一套开发代码，方便快速迭代更新。在手机上，利用UIWebview实现一个小浏览器，然后通过编写js桥，实现了web开发的介入。性能方面，hybrid模式与原生的native之前是有一定差距的，没有原生流畅。JavaScript的设计模式（待补充）单例模式实例化响应

我最近特别关注JavaScript驱动的移动应用开发解决方案，先后撰文介绍了众多的相关话题，包括jQueryMobile、jQTouch、SenchaTouch和PhoneGap。我得承认，要搞清楚这一批前沿技术并非易事，于是我这回概述一下这些主要的移动开发解决方案的主要特性和优点(51CTO注：PhoneGap未作介绍，欲了解更多PhoneGap内容请移步51CTO专题：跨平台移动web中间件P

转载自：IBMdeveloperWorks本人在使用markdown重新排版；作者：JeffBail,移动Web开发人员,Freelancewriter发表时间：2012年12月06日前言固定宽度的静态网站很快被灵活的响应式设计所取代

前话：像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识什么是像素：像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦

课程目录（全套完整版45GB高清视频教程）01HTML02CSS03项目实战：品优购电商项目04HTML5CSS305Flex伸缩布局06移动web开发07JavaScript基础语法08WebAPI编程

微信JSSDK+HTML5，让移动Web开发与微信结合轻而易举！跨平台、零成本，让大众创业变得更方便。

移动web开发踩坑和优化小结1.写在前面到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。

微信JSSDK+HTML5，让移动Web开发与微信结合轻而易举！跨平台、零成本，让大众创业变得更方便。

最近在做项目登录注册页面的时候一直在思考一个问题，如何让输入表单的时候，手机软键盘显示“下一步”而非“前往”，随着了解的深入，就顺便总结一下input各类型和手机软键盘的关系。1.type=text，ios和安卓都会弹出全键盘，右下角都为go按钮或者是前往2.type=url，ios和安卓都会弹出带有“/”、“.com”之类的可以快速输入网址的软键盘3.type=number，ios下会弹出包含数

学习与参考了以下文章：AlloyTeam---移动web适配利器-remw3c---使用Flexible实现手淘H5页面的终端适配移动web开发之像素和DPR慕课网碧仔---Hello，移动WEBRem

但在国内RN还是占据混合开发主流，伴随着人口红利，很有可能你正面临别人已经解过的问题，O(∩_∩)O哈哈~常见跨平台开发集合附:移动端跨平台开发的深度解析如此繁荣的移动webapp开发市场：总结当下的一些移动

《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书，你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能，横跨多个移动平台。

工作中，第二个比较独立的项目是一个IM聊天应用，我负责H5版本的开发，功能比较简单，可以发送文字图片，以及播放原生客户端发来的语音消息。即时通讯自然要用websocket，接口也比较简单，主要精力在于理解websocket服务相关消息协议上，相关文档乱到让你无法想象，通常没有人会告诉你该怎么做，他们只会扔给你一个链接。我花了大量时间精力，把一堆文档转换成代码，区区三百行，浪费了很多时间，效率低下，

1.rem基础rem单位rem是一个相对单位，类似于em，不同的是em的基准是父元素字体大小，rem的基准是html元素的字体大小使用rem做单位的元素的实际大小=rem值*html元素的字体大小html{font-size:12px;}div{width:2rem;/*实际大小:12*2=24px*/height:3rem;/*实际大小:12*3=36px*/background-color:b

一、移动web基础京东双十一销售额-PC:26%-移动端:74%主流移动站点-京东商城手机版-淘宝触屏版-苏宁易购手机版(结构:轮播图、导航栏、产品信息)移动端浏览器-UC浏览器-QQ浏览器-百度浏览器-Safari浏览器(都是基于webkit内核)案例《京东商城》-首页(页面制作和JS效果)-商品分类(页面制作和JS效果)PC端的开发技术可以实现吗?不是兼容问题，更多面对的是适配问题。解决方案:

移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。常用的解决方案如下：1使用fastclick，这个可以非常完美的解决点穿问题。

一、移动端touch事件当用户手指放在移动设备在屏幕上滑动会触发的touch事件-touchstart:当手指触碰屏幕时候发生(不管当前有多少只手指)-touchmove:当手指在屏幕上滑动时连续触发-touchend:当手指离开屏幕时触发touch事件包含三个触摸列表(实现多点触控)-touches：当前位于屏幕上的所有手指的列表event.touches[0].clientX-targetTo

浅谈移动Web开发（上）：深入概念这篇文章里面viewp

1、移动web开发这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。手机网页可以理解成pc网页的缩小版加一些触摸特性。

三、AppCanAppCan.cnAppCan一站式移动开发服务平台，自主研发国内首创混合开发跨平台适配，具有UI快速开发框架、本地功能调用API接口、应用打包系统、IDE集成开发环境和本地应用调试模拟器，预置数百套界面模板和数十种应用插件及多套应用模板，让移动开发再简单一点。官网：http://www.appcan.cn/。它利用HTML5+CSS3+JavaScript技术可以快速地开发与本地

一、响应式开发1、响应式布局，就是一个网站能够兼容多个终端。2、响应式开发的原理CSS3中的MediaQuery（媒介查询，and之后一定要加空格@mediascreenand(min-width:768px)and(max-width:992px){};通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕（移动设备）768px以下小屏设备768px-992px中等屏幕992px-12

第一槛有过移动WEB开发的同学应该知道，IOS浏览器下iframe中内容过多时，

今天这篇文章向大家推荐10大优秀的移动Web开发框架，帮助开发者更加高效的开发移动Web应用。

前言做过移动Web开发的同学都知道，移动端日期选择是很常见的需求。在PC端，我们有很丰富的选择，比较出名的就有Mobiscroll和jQueryUIDatepicker。

changePage()页面跳转jQuery.mobile.changePage(to[,options])从一个页面跳转到另一个页面，使用$.mobile对象的changePage方法来实现。但要使用此方式的时候，要以点击一个链接或者提交表单来实现。此方法有两个参数。to：是第一个参数，是必须的，不可缺少。类型：字符串或者对象。字符串:绝对或相对URL地址。如：("about/us.html")

响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览Web页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。该框架的文档实际上结合使用了jQueryMobile框架和CSS3媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。没有自定义样式，我们的电网将3列的布局在所有的屏幕宽度：在我们的自定义样式，我们

页面初始化事件(pagebeforecreate、pagecreate)JqueryMobile会自动基于page"内的增强的约定自动初始化一些插件。例如：给一个input输入框约定了type=range属性会自动生成一个自定义滑动条。这些自动初始化的行为是受"page"插件控制的，它在执行前后部署部署事件，允许你在初始化前后操作页面，或者甚至自己提供初始化行为，禁止自动初始化。注以下的页面初始化

在移动web开发中，由于手机界面较小，为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题，通过请教他人以及百度，个人感觉swipe.js比较好用。

1、移动web开发（pc端的页面用手机浏览器开）这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。

juejin.im/post/5d736747e51d4561ff66688c2.viewport移动端适配https://juejin.im/post/5bfa99e0e51d4555557d26c63.移动

vertical-align:middle;设置图片居中移动WEB开发视口viewport（显示网页的屏幕区域）布局视口layoutviewport字太小，手动缩放网页视觉视口visualviewport

什么是移动WEB开发，其实就是将网页更好的显示在移动端的一些设置，简单来说就两点如下：流式布局：流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

标签进行配置我们在qq聊天中有时候给朋友发一个链接，我们看到的是卡片类型，在meta标签里面设置，就可以自定义卡片的文字及图片信息，如下图所示，QQ获取分享信息的规则在QQ开放平台里面里面有具体说明：腾讯移动

设备的划分：image.png媒体查询：使用媒体查询能针对不同屏幕区间设置不同的布局和样式怎么使用媒体查询：关于媒体查询@media语法：@mediascreenand(max-width:768px)and(min-width:320px){属性样式}demo：响应式容器：在超小屏设备的时候768px以下当前容器的宽度100%背景蓝色在小屏设备的时候768px-992px当前容器的宽度750px

lessLess环境安装安装nodejs在部分win8系统当中无法安装（解决办法的是已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行）安装完成nodejs之后检测是否安装完成node–v查看版本然后检测npm是否自带npm–v查看版本在线安装然后运行npminstall–gless(部分电脑要sudo管理权限)Lessc–v查看版本是否安装成功学习less[官网](http://

前言：本文主要给大家介绍一下移动端常用的事件和插件。一、事件1.触摸事件touch触摸事件是一组事件touchstart：当手指触摸屏幕的时候触发touchmove：当手指在屏幕来回的滑动时候触发touchend：当手指离开屏幕的时候触发touchcancel：当被迫终止滑动的时候触发（来电，弹消息）绑定事件由于这是一组有关联的事件，所以绑定事件要用addEventListener：box.add

前言：一般来说，一个比较大的网站和平台都有PC端和移动端两个网站点，即要写两套css样式，也有一些公司采用的是响应式布局（本质上也是两套css样式），今天就给大家介绍几种移动端的布局方式。在介绍布局方式之前，先介绍一下视口：viewport，viewport是移动端特有的一个承载网页的虚拟区域，是浏览器承载视口，视口承载网页。我们在head标签内加入这句话就完成了标准的移动端适配方案。一、流式布局

移动web开发指的是:需要适配移动设备的网页开发移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术移动端与pc端web开发的区别:1、浏览器不同移动端的浏览器与

如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什

1-1课程导学第2章移动web硬知识点本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。

Java虚拟机5、EffectiveJava6、SpringBoot实战7、SPRING技术内幕8、高性能MySQL9、高效程序员的45个习惯：敏捷开发修炼之道10、Java并发编程实战11、HTML5移动

 本文将详细介绍移动web开发中的常见问题Input【光标颜色】  默认情况下，光标颜色与字体颜色color相同，但也可以通过caret-color属性来单独设置caret-color:auto;caret-color

移动端开发-大纲一、移动web开发和适配1、特点：跑在手机端的web页面（H5页面）、跨平台、基于webview、告别IE拥抱webkit、更高的适配和性能要求小技巧：在调试窗口中，选中“computed