一、定制键盘行为搜索框设置type="search"用一个form表单包围起来，在onsubmit事件里面阻止默认行为；对于只输入数字的文本框，可以通过以下设置来实现键盘只显示数字，不显示其他字符。配置input节点的autocapitalize、autocorrect属性；autocapitalize="off关闭首字符大写"autocorrect="off"关闭英文单词的校验二、流畅滚动的N条

原文链接：Web移动端Fixed布局的解决方案移动端业务开发，iOS下经常会有fixed元素和输入框(input元素)同时存在的情况。

前言几个月前ReactHooks正式发版，在正式发版之前，发布了alpha版本，这时就已经有很多人开始分享ReactHooks的使用方式和经验。笔者也是等到了正式发版稳定后才开始学习，这次在原来高仿B站视频弹幕的基础上使用Hooks开发了直播功能HooksHooks官方介绍说不用写class组件就能使用state和其它class组件的特性，这简直是Functionalprogramming党的福利

将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间，下面的代码可以实现此功能：//入口函数if(window.localStorage){initJs();initCss("css","/gfdzp201508257998/Turntable/Style/css_whir.css");}else{addFile("/gfdzp201508257998

最近比较关注疫情，平时也比较多看腾讯新闻。我发现腾讯疫情方面的新闻是单独的一个网页做的，而且还能很好的适配移动端和PC端，做到了两者很好的兼容，于是我花了些时间来弄明白到底怎样做能达到同样的效果，经过我的一番研究，总结腾讯在移动端适配的方案就是：vw单位和transform:scale()缩放结合的产物那看我慢慢道来，不过在这之前，先要弄清楚几个问题：1.vw单位是什么？相对于视口的宽度，我们把整

滑动事件touchstart手指开始滑动的位置touchmove手指滑动的位置touchend手指离开的位置监听滑动事件touchstart(e){//如果你要阻止点击事件，请反注释下一行代码//e.preventDefault()this.startX=e.touches[0].clientXthis.startY=e.touches[0].clientY},touchmove(e){//e.p

利用chrome可以同步移动端和PC端的web开发调试，前提是，Android系统版本必须4.0+，而且必须用chrome，或者Android4.4系统版本以上的原生app里面的webview才可以。由于Android4.4的原生appwebview的调试暂时还比较少，所以，这里简单说一下chrome下的调试。1、移动设备和PC设备必须安装了chrome32以上的版本，移动设备必须为Android

一些细节处理在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下：有时候输入框focus以后，会出现软键盘遮挡输入框的情况，这时候可以尝试input元素的scrollIntoView进行修复。在iOS下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是iOS下的一个坑吧。有些第三

有时候在用一些插件时会出现左右滑出现空白部分，由于子元素的宽度大于屏幕本身的宽度导致页面发生收缩情况，添加以下代码解决：//1.一开始用这段代码，结果发现滚动都失效了，如果页面大于屏幕高度将无法滚动至底部，所以淘汰//document.addEventListener('touchmove',function(e){//e.preventDefault();//});//2.改良后的代码，将该代码

1.文件目录：    asset放静态的文件如字体库font、字体图标库iconfont；    common放置公共文件；    image放置项目中用到的图片和图标；    css-lib文件夹放置引入的外部插件的css文件，最好用压缩版的-util文件夹放置公司内部成员封装的插件和组件的css文件-base.css初始化的样式和定义的与内容无关的公共类-common.css跟项目内容相关的一

心知梦圆博客园首页新随笔联系管理订阅随笔-20文章-0评论-0web移动端开发技巧与注意事项汇总一、meta的使用1、强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览

**需求:随着移动端设备的变化，内容也跟着变化。**先来说说rem单位，以rem为单位，其大小是根据根元素（html标签）的字体大小来判断的，如html的font-size：100px；子元素div的width：2em；等同于width：200px；（100*2），这就来思路了：先以一个固定适配的html的font-size来把页面完成，后再根据适配的宽度来动态的设置其html的font-size

在公司主要写web移动端的项目，一开始较大的感触就是适配很麻烦，分ios和安卓，安卓生态又混乱得很，所以适配要做好了，不然这个设备好好的，有些设备却页面错乱。在网上找了很多方案，踩了不少坑。

1.手机和电脑在同一个局域网中首先必须保证测试项目用的手机和编写项目的电脑在同一局域网中同在一局域网的办法：手机和电脑同时连上同一个wifi/手机开热点给电脑/电脑开wifi给手机连接2.获取本机(电脑)的ip地址点击开始，输入cmd,按回车在命令控制台中，输入ipconfig指令（linux系统是ifconfig），按回车，查看ip地址首选第一个以168.192.xx.xx形式的地址3.修改ho

把web移动端的表单验证添加上。而我的随笔基本都写我不熟悉，我熟悉的，感觉舒适的都不会写。通过keyup事件，获取用户输

1、移动端的响应式布局主要用到rem，并且rem要跟随页面的尺寸改变而不断调整，两者缺一不可。2、本文没有采用flexible方案，该方案主要是使用js监听window的size，进而改变rem数值；3、采用rem+vw是当前比较合适的解决方案；flexible.css//对应750px稿图html{font-size:13.33333333vw}//尺寸过大的兼容方案@media(min-wid

一、相信大家有被iPhoneX底部黑色横线支配的恐惧上面我们可以看到，底部的导航栏被一条黑色横线所盖住，那么就很烦。下面我们可以开始进行适配环节1、首先我们可以用JS判断手机环境是不是iPhoneX代码如下if(/iphone/gi.test(navigator.userAgent)&&(screen.height==812&&screen.width==375)){//是iphoneXconso

1.现象可以看到下面两张图，图1搜索框为fixed固定在顶部，滚动没有任何问题。图2当光标进入搜索框时，ios自作聪明的把光标定位到中间，并且fixed属性被自动修改成了absolute。此时注意滚动页面的话，会发现原本fixed的搜索框跟着文档一起滚动了。再仔细观察ios下的一些特点，ios为了让input垂直居中，甚至还滚动了滚动条，原本看不到的上半段产品的内容也漏出来了。2.参考别人的解决方

移动端开发导读：我国移动端浏览器都是基于webkit修改的，所以在照顾兼容性方面只需要考虑webkit内核即可作为前端开发，不建议纠结于dp，pt，ppi等单位移动端调试方法：1.谷歌浏览器模拟手机调试2.搭建本地web服务器，手机和服务器在同一局域网内可通过手机访问服务器3.搭建外网服务器，通过ip或域名访问视口：视口viewport就是浏览器显示页面内容的屏幕区域，视口可分为布局视口，视觉视口

前言在web移动端开发中，做产品页面时可能需要一个a标签来链接一个联系方式（电话号/座机号等），也可能会是一个侧边悬浮的电话小图标，无论怎么展示，我们都希望每当用户点击时，直接通过网页输好手机号并引导用户拨打给我们

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画，然后用到web移动端却没什么卵用，会出现滚动不流畅，卡顿，失灵等等现象。

flexble是一个可以动态的添加meta标签的js插件，使用它进行web移动端的开发，html代码如下-->再来一波DEMO页Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093

在开发App端的网页时，要适配iphone、ipad、ipod、安卓等各种机型，一般是直接使用em、px转em、界面缩放。本章是通过将界面缩放，等比例显示在各机型上。过程中遇到了些问题和大坑~然后下面是具体的自适应尝试~方案一设置tranform/scale首先设置内容固定宽度、自动高度（以下举例）width:375px;height:auto;通过获取窗口的宽度与固定宽度相除，获得缩放比例con

是最好用的产品设计与界面设计工具，矢量绘图，支持web移动端App的产品设计与界

我们知道现在我们无法直接通过js直接跳转到微信和QQ等软件进行分享,但是现在像UC浏览器和QQ浏览器这样的主流浏览器自带一个分享工具,而他们也有自己定义的js接口.我们通过调用浏览器的接口去调用浏览器的分享,从而实现原生分享功能.是不是很酷呢?工具介绍:nativeShare是一个可以通过javascript直接调用原生分享的工具.该工具具有以下特点:支持原生微博、微信好友、微信朋友圈、QQ好友、

（安卓）Audio标签播放问题描述问题：移动端使用audio.play()方法，在安卓上不会播放。iphone支持ontouchstart事件，android视为不安全，不支持。解决方案：1.采用onclick~两者都支持。2.判断iphone和android，用不同的触发事件。（安卓）长按按钮，会导致变灰色（在微信浏览器上）解决方案：移除安卓端的ontouchstart事件letu=window

1:移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？定宽布局一般移动端设计稿是640或者750的尺寸2:em和rem的区别em相对父级元素设置的font-size来设置大小如果父元素没有设置font-size，则继续向上查找，直至有设置font-size元素rem直接参照html标签字体大小，并且所有使用rem单位的都是参照html标签3:移动端用过那些meta标签？复制代码4:移动端cli

主要实现方式：使用H5的video元素结合H5的网络频播放器（video.js）实现rtmp流的直播播放video.js介绍Video.js是一个通用的在网页上嵌入视频播放器的JS库，Video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash播放器。优点： 1.它是开源免费的，你可以在github很容易的获取它的最新代码。   2.使用它非常的容易，只要花几秒钟

而本文的主题--移动端开发的兼容适配与性能优化，就是希望能从一些常见的移动端开发问题出发，厘清Web移动端开发的前前后后，一些技术的发展过程，一些问题的优化手段

众所周知，在互联网行业里，移动端占有的比例越来越高了，尤其实在电商领域，用户购物大部分在移动端。比如淘宝双11，在移动端支付的接近7成。这就要求我们产品质量越来越高，那对于我们前端工程师来说也是一个挑战，如何让我们所开发的页面能有更好的体验，就是我们今天讨论的话题：移动端页面性能优化。Html5的出现对于移动端影响挺大，HTML5框架可以提升网站的访问速度，通过优化前端将响应时间加快，使用户的等待

--Web移动端商城移动端商城手机网站html整套模板，web移动商城仿app手机模板下载。原生的js和jquery-1.6.2.min.js，页面才有html5自适应。

最近用vue+webpack做了一个web移动端的音乐播放器使用的QQ音乐的接口，但是接口对host有验证，然后产生以上问题解决方案：进入到bilud->webpack.dev.conf.js安装axios

在Web开发过程中，对html页面进行开发和调试的时候都会用到浏览器提供的调试工具，小编我最常用的就是Chrome浏览器自带的开发者工具了，可以很方便的对JS代码进行断点调试，log也很方便。但是在移动端的浏览器上进行开发就没有这么方便了，不管是iOS的Safari还是Android的众多浏览器。在这里小编推荐一个移动端的调试神器Eruda。Eruda是一个专为手机网页前端设计的调试面板，类似De

一、引入在一个项目demo中，实现单指触控卡片的向任意方向的拖动效果。网上没有现成的插件，所以只好原生js来写。产品要求需要禁止掉多点触控。这个过程很让人头疼，试了很多方法，都不太实现。后来仔细研究，测试了一下移动端的三个常用事件。二、事件移动端的触摸事件常用的有一下三种：touchstart:当有新手指触控到绑定的元素，会触发一次事件。touchmove:当有手指放绑定的元素上会一直触发，从触发

前端框架的选择在web移动端应用快速崛起的今天，webapp，hybirdapp挤压传统原生app的趋势越发明显，产品的快速更新迭代、跨平台适配，催生了越来越多五花八门的前端框架。为了应对各式各

最全的APICloud开源前端框架效果盘点cnpm本地存储localstrogelocalstroge存储对象数组cssnormalize.cssCSS秘密花园移动端HTML5手机开发——滚动和惯性缓动Web

特别声明：本文转载于EFE的《Web移动端Fixed布局的解决方案》。

1、click300ms延迟？fastclick可以解决在手机上点击事件的300ms延迟zepto的touch模块，tap事件也是为了解决在click的延迟问题触摸事件的响应顺序为touchstart-->touchmove-->touchend-->click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题若移动设备兼容性正常的话（IE/Firefox/Sa

本期导读：本期资深测试工程师王庆丰带来使用Faskmonkey进行Monkey测试的实践的总结，丁叶丹虹分享自己对Web移动端的兼容测试理解，而柯婵为大家带来对于埋点测试的学习与理解。

web移动端开发的调试分ios设备和安卓设备。

web移动端电话号码识别差异在iOSSafari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：7位数字，形如：1234567带括号及加号的数字，形如：(+86

百度touch.js可以说是Web移动端touch点击事件不错的解决方案，搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。

html//弹出层的半透明灰色背景//弹出层的内容//弹出层需要滚动滚动的内容浙江省江苏省黑龙江省css$("body").css("overflow","hidden");//如果需要兼容PC端，需要给body溢出隐藏这段js需要写在自己的js中，或者事件中;container表示委托的浮层容器元素（$包装器对象），或者页面其他比较祖先的元素，但是，非常不建议使用$(document)或者$(d

功能预览.png1.不多说，直接上代码。选项卡静态样式直接使用WE-UI控件，切换效果用JQuery实现。body中:选项一选项二选项三2.外部js文件中//选项卡切换$(".check_1").click(function(){$(".check_1").addClass("weui-bar__item_on");$(".check_2").removeClass("weui-bar__item

相关标签rem、viewport、mediaQuery、vw,vh、...前言最近空余时间，还是在找些react小项目练手。练手的项目不是别的，正好是目前在做的iOS项目，在边做iOS边写react的对比中，自然而然地牵扯到了webApp的适配问题。一、移动端适配前期准备meta标签设置idealviewportmetaviewport标签首先是由苹果公司在其safari浏览器中引入的，目的就是解

文|YeaseonPixel像素知识px：csspixels逻辑像素，浏览器使用的抽象单位dp，pt：diviceindependentpixels设备无关像素dpr：devicePixelRatio设备像素缩放比计算公式：1px=（dpr）^2*dpiPhone5的dpr为2，所以640dp*1136dp，就相当于320px*568pxDPI：打印机每英寸可以喷的墨汁点PPI：屏幕每英寸的像素数

阻止移动端窗体滚动的JS/CSS处理首先CSS层面，在标签上增加一个类名，例如noscroll，然后配合如下CSS和JS代码：.noscroll,.noscrollbody{overflow:hidden;}.noscrollbody{position:relative;}然后当浮层出现的时候：document.getElementsByTagName('html')[0].classList.a

布局方案从有网页这个东西的时候就以及有了，只是如今随着屏幕的多样化，移动端市场的逐渐占据主导地位，且界面变得越来越复杂而变的多种多样首先我们要从早先的移动端适配解决方案说，最出名的就是bootstrap的适配结局方案bootstrap通过media查询将页面尺寸划分为4个阶段4807689221200通过这个将页面四个阶段每一个阶段对应一套布局方案，也就是常说的响应式布局，分为12栅格布局，如今s

在iOS的web移动端中设置了个弹窗，有两个input和一个textarea，在Safari浏览器中出现了两个问题，一个是iPhone7plus光标错位问题，一个是iPhone6s切换input输入时父级

响应式什么是响应式页面呢？顾名思义响应式页面就是能做出响应的页面，它的页面效果不是定死的，会随着用户的改变而改变。如何着手响应式有以下几个思考的方向找一份设计图使用MediaQuery隐藏元素添加metaviewport明白手机端交互方式的区别MediaQuery是什么Mediaquery翻译过来就是媒介查询，媒介就是我们查看这个网页的设备。媒介查询源于CSS3，它可以根据用户的设备所具有的某些特