配置参考： html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html {...font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html...font-size: 32px } } 移动端touch事件(区分webkit 和 winphone) 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 以下支持webkit 描述 touchstart...在IOS safari下，大概为300毫秒。这就是延迟的由来。...元素在ios和andriod中无法自动播放 应对方案：触屏即播 $('html').one('touchstart',function(){ audio.play() }) 可参考《无法自动播放的
header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search 4.浏览器支持 最新版本的 Safari、Chrome、Firefox...= 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(IE , Chrome, Safari支持);WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM...keygen:支持浏览器:(Opera 10.5,Chrome 3.0) keygen 元素的作用是提供一种验证用户的可靠方法。...min、max 和 step 属性 min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值。...注释：min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range。
5、 移动端手机号码识别（IOS） 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字...在IOS safari下，大概为300毫秒。这就是延迟的由来。...input type="text" autocapitalize="off" /> 13、 关闭iOS输入自动修正 和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容...15、 移动端如何清除输入框内阴影 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： input, textarea { border: 0...如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari
以全屏模式显示元素 你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。...确定设备类型 我们经常需要这样做，在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的userAgent来确定的。...|Macintosh/i; return reg.test(navigator.userAgent.toLowerCase()); }; 11.获取浏览器类型和版本 作为前端开发人员，您可能会遇到各种兼容性问题...这时候你可能需要获取浏览器的类型和版本。...const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; randomNum(1, 10)
*Mobile.*/), //是否移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU....') > -1 //Safari }; } } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android...() || browser.versions.iPhone() || browser.versions.iPad()) { alert('移动端'); } 十五、检测是否电脑端/移动端 var...还有一种方法是在（前缀$）变量中高速缓存元素 ? 链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。...本文在GitHub的地址 Common-code 阅读更多 参考文章 『总结』web前端开发常用代码整理
第一个Demo-Web 本章Web所指的是移动端（模拟器/真机）里的浏览器（如：Chrome、Safari）。...", "Browser"); 4、接下来打开PC的Chrome浏览器，输入访问地址chrome://inspect/ 在模拟器启动默认浏览器，打开百度首页，如图所示。...", "Chrome"); 4、接下来打开PC的Chrome浏览器，输入访问地址chrome://inspect/ 在真机启动Chrome浏览器，打开百度首页，如图所示。...方式二：通过ios_webkit_debug_proxy工具 首先将模拟器上的Safari打开，之后访问百度首页； 之后在Mac上打开终端，输入启动代理命令 ios_webkit_debug_proxy...方式二：通过ios_webkit_debug_proxy工具 首先将真机上的Safari打开，之后访问百度首页； 之后在Mac上打开终端，输入启动代理命令 ios_webkit_debug_proxy
第一个Demo-Web 本章Web所指的是移动端（模拟器/真机）里的浏览器（如：Chrome、Safari）。...方式二：通过ios_webkit_debug_proxy工具 首先将模拟器上的Safari打开，之后访问百度首页； 之后在Mac上打开终端，输入启动代理命令 ios_webkit_debug_proxy...'] = 'iOS' # 移动操作系统版本 desired_caps['platformVersion'] = '11.3' # 使用的移动设备或模拟器的类型 # iPhone Simulator,...方式二：通过ios_webkit_debug_proxy工具 首先将真机上的Safari打开，之后访问百度首页； 之后在Mac上打开终端，输入启动代理命令 ios_webkit_debug_proxy...'] = 'iOS' # 移动操作系统版本 desired_caps['platformVersion'] = '11.1' # 使用的移动设备或模拟器的类型 # iPhone Simulator,
*Mobile.*/), //是否移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU....') > -1 //Safari }; } } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android...*Mobile.*/), ios: !!u.match(/\(i[^;]+;( U;)? CPU....new Date(); var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth...还有一种方法是在（前缀$）变量中高速缓存元素 ? 链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。
注意：测试浏览器为chrome；size="3"好像"有点问题"!...，这里所谓的“可见字符”也不是真正意义上的“可见”，鼠标光标能够左右移动查看所有字符 2.HTML5中容易“忽视”的input类型中的属性值： max：输入最大值 min：输入最小值 required：...输入字段是必须的 step：输入步长 1 <input type="number" name="num1" id="" min="1000" max="1000000" step="2" required...3.HTML5新的input类型： color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week...在HTML5表单中，都有自动完成功能： 比如： 在第一次输入值时，第二次输入时下拉框有“记忆功能”。
前言 在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！...2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间 问题3:部分安卓手机出现样式问题 去除input默认样式的方法: input,textarea...及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间 问题4:Safari浏览器自动播放...IOS中对input键盘事件keyup/keydown/keypress等支持不好的问题 经查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或数字的keyup,但检测不到中文的keyup,在输入中文后需要点回退键才开始搜索...-21 00:00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00 iOS(safari)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。...在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。...，PC端的该属性已经被移除，该属性在移动端要生效，必须设置meta viewport。...如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari... 14、怎样默认优先使用最新版本IE和Chrome？
使用Navigator.getUserMedia可以做到在主流浏览器中获取用户摄像头数据，麦克风数据，我研究了一下，发现在ios、安卓微信浏览器中都不行。...而在安卓6.0.1自带浏览器中可以，iOS Safari不支持，mac Safari不支持，兼容性还是太差，所以还是弃用了。但是我研究的结果还是保存一下，万一以后微信浏览器支持了呢？...constraints 如果单纯指定需要什么类型的媒体，只要这样就行{ audio: true, video: true }，这个表示需要视频和音频。...应该也只支持这两种了，我看了MDN和W3c，都没发现第三种 以下把video参数写成object格式的，在chrome中都会报错Uncaught TypeError: Failed to execute...，然而这些用法真的是MDN和W3C标准，不知道chrome为什么不支持。
20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize.html...rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 页面基准320px(20px),html font-size值的计算： [javascript...vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome...x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀...) ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4
-- 优先使用 IE 最新版本和 Chrome --> ...5、IOS中Safari设置保存到桌面图标： 这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px 注意：这些特效我自己做了一些测试，在Chrome...请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache...max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应 min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应 max-stale指示客户机可以接收超出超时期间的响应消息
虽然说Android 4.0+以上的移动设备支持桌面版Chrome远程调试，而且在Android 4.4以下也仅限于预览Chrome手机版浏览器内部效果，我们无法在问题浏览器下实时联调。...我在Chrome 38/39版本测试时打开Debug客户端出现页面白板，原因未知，了解原因的欢迎留言给我。换为Safari浏览器打开则正常。...2.2+ 中的phonegap iOS 4+ 的safari浏览器 BlackBerry v6.x 模拟器 webOS chrome8+ safari5+ 关于Weinre的Java版本下载地址无法访问的问题...然后在Safari浏览器地址栏输入http://localhost:8910/，若打开如下所示页面，则表明weinre服务启动成功。 ?...，例如我的页面放在本地环境并使用端口8888监听，所以在移动端浏览器需要输入： 。
尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。...使用IOS Safari + Mac OS Safari配合调试 这个方法对用MAC来办公的伙伴就比较友好了～ Apple允许开发者通过数据线连接的方式，在Mac OS的Safari里面调试iOS设备上的网页...但是这种方法在使用前，需要简单设置以下内容： 在iOS设备上，打开Safari的Web检查器，选择设置 -> Safari -> 高级 -> Web检查器命令。...Weinre为了能够同步桌面的调试客户端和移动设备上的调试目的，需要你搭建一个调试服务器(Debug Server)，通过这台调试服务器，可以在调试目标(Debug Target)和桌面调试客户端(Debug...当看到优点是不是很激动，在真机上可以调试iOS和Android设备的网页耶✌️ 使用vConsole调试 由腾讯出品的vConsole调试工具，在调试移动端的时候非常有效，而且其使用方法也是简单。
1.输入型控件 Input type 用途 说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值的输入域 属性 值 描述 max number 规定允许的最大值 min...（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。...类型 作用 on 该字段无需保护，值可以被保存和恢复 off 该字段需要保护，值不可以保存 unspecified 包含的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on 如...目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。...="number" max="100" value="20"/> stepMismatch 确保输入值符合min,max,step的设置 设置max min step，<input type="number
('Chrome: ' + sys.chrome) if (sys.opera) return ('Opera: ' + sys.opera) if (sys.safari) return...randomNum 「生成指定范围[min, max]的随机数。」.../** * * @description 生成指定范围[min, max]的随机数 * @param {Number} min * @param {Number} max * @return...{Number} */ function randomNum(min, max) { // 向上取整最小范围 min = Math.ceil(min) // 向下取整最大范围 max...(Math.random() * (max - min + 1)) + min; } isColor 「判断是否为16进制颜色。」
然而，由于安全原因，最新的WebRTC规范阻止了这一点的发生，因此在某个时候，这个“特性”将在所有浏览器中停止工作。例如，它不再适用于Safari。...CLI工具 wave-share 这是一个简单的工具，使用 wave-share共享tx/rx协议接收和发送数据。在标准输入上键入一些文本，然后按Enter键发送。.../wave-share 下面是一个演示如何使用CLI工具的短片：https://youtu.be/TcfjCMCyqF0 已知的问题/需要改进的东西 不适用于:IE、IE Edge、iOS上的Chrome.../Firefox、macOS上的Safari 超声波传输在大多数设备上不起作用。...需要用纯JS重写 在移动设备上，使用Firefox，即使在关闭选项卡后，页面仍可以在后台运行
和 Chrome */ -o-transition-timing-function: cubic-bezier(.34,0,.84,1);/* Opera */ } a:hover,button:...date) { return; } date.replace(/-/g, '/'); // 虽然 win 浏览器两种符号都可以，但是需兼容 ios。...= 0, max = 10) => { return Math.floor(min + Math.random() * (max - min + 1)); }; /** * 随机生成颜色...document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/"; }; /** * 获取浏览器类型和版本...sys.chrome = s[1] : (s = ua.match(/version\/([\d\.]+).*safari/)) ?
领取专属 10元无门槛券
手把手带您无忧上云
