在*.html
的<head>
标签中引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
Note:HTML
中无需设置<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
,不然,无论设备是多少的dpr,都会强制认为其dpr是你设置的值。css
scss
定义px2rem的转换@function px2em($px, $base-font-size: 16px) { @if (unitless($px)) { @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you"; @return px2em($px + 0px); // That may fail. } @else if (unit($px) == em) { @return $px; } @return ($px / $base-font-size) * 1em; }
rem
咱们但愿文本在不一样dpr
屏幕下文本字号相同咱们但愿在大屏手机上看到更多文本html
不但愿出现13px和15px这样的奇葩尺寸android
文本仍是使用px做为单位,只不过使用[data-dpr]属性来区分不一样dpr下的文本字号大小web
// dpr === 1, 设计图尺寸375 * 667为例 @mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; } } // dpr === 2, 设计图尺寸750 * 1135为例 @mixin font-dpr($font-size){ font-size: $font-size / 2; [data-dpr="2"] & { font-size: $font-size; } [data-dpr="3"] & { font-size: $font-size; } }
@include font-dpr(16px);
不一样手机开启路径不一样,能够自行百度;chrome
这里介绍一个通用的方式:npm
电脑端启动Web服务器
,将H5
资源部署到服务器中,手机局域网内经过电脑IP + path
访问H5
页面。浏览器
示例:服务器
npm i -g browser-sync cd <project dir path> // 以项目路径建立web服务端 browser-sync start --server --files ./
手机默认浏览器(非微信)经过PC端IP + path
访问H5
页面。微信
若没法访问,确认处于同一局域网后,关闭PC端防火墙试试。less
chrome://inspect
Remote Target
中显示数据线链接的设备及其可访问页面Note:调试过程当中要保持手机不熄屏
URL Scheme
旧的通用唤端解决方案:使用前须要确认是否已弃用
URL Scheme
是H5和客户端、客户端和设备沟通的桥梁。
使用URL Scheme
在保证我的信息在设备全部者知情并容许的状况下实现通讯。
URL Scheme
的构成:[scheme:][//authority][path][?query][#fragment]
,即:客户端APP在移动设备中的统一资源定位符。
而这里的Scheme
是移动设备为每一个客户端APP分配的标识符。
常见的Scheme
:
微信 | 支付宝 | 淘宝 | 微博 | 知乎 | 短信 | |
---|---|---|---|---|---|---|
weixin:// | alipay:// | taobao:// | sinaweibo:// | mqq:// | zhihu:// | sms:// |
Intent
安卓原生Google浏览器唤端协议
总体结构以下:
intent: HOST/URI-path // Optional host #Intent; package=[string]; action=[string]; category=[string]; component=[string]; scheme=[string]; end;
使用示例:
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>
Universal Link
IOS9+
Hybrid
混合开发调试Hybrid
混合开发,即H5
页面嵌入到原生客户端提供的Webview中渲染。
这里的调试大致和H5
页面调试没什么不一样,只要注意是否能调试和客户端是否屏蔽调试功能强关联。
调试可能须要客户端区别于线上应用,单独打能够调试的开发包(具体流程须要咨询客户端)。