AlexZ33
commented
5 years ago Open AlexZ33 opened 5 years ago
AlexZ33
commented
4 years ago AlexZ33
commented
4 years ago 参考:
移动端高清、多屏适配方案 vue-cli脚手架里如何配置屏幕自适应 如何在Vue项目中使用vw实现移动端适配(转)
viewport meta 标签源于 Apple 公司，用来定义 iOS Safari 浏览器展示网页内容的可视范围及缩放比 率。它虽然没有成为W3C标准，但是被其他绝大多数的移动端浏览器所支持（目前已知 IE Mobile 10 不支持）。W3C 尝试将 viewport meta 标签的功能进行标准化并通过 CSS 的 @viewport 规则来实现 同样的功能，但这个标准目前还在草案中，兼容性也没有 viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
方法 1 仅使用 vw 作为 CSS 长度单位
// iPhone 6尺寸作为设计稿基准
$vw_base: 375;
@function vw($px) {
@return ($px / $vm_base) * 100vw;
}.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vm(15) vm(10); //内边距
&_item {
flex: 1;
text-align: center;
font-size: vm(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vm(40); // 宽度
height: vm(40); // 高度
img {
display: block;
margin: 0 auto;
width: vm(40); //宽度
height: vm(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%
}
}
}
&_name {
margin-top: vm(2)
}
}
}
}.mod_grid {
position: relative;
&::after {
// 实现1物理像素的下边框
content: '',
position: absolute;
z-index: 1;
pointer-events: none;
background-color: #ddd;
height: 1px;
left: 0;
right: 0;
top: 0;
@media only screen and (-webkit-min-device-pixel-ratio:2) {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%
}
}
}.mod_banner {
position: relative;
// 使用padding-top 实现宽高比为 100:750 的图片区域
padding-top: percentage(100/750);
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}由此，我们不需要增加其他任何额外的脚本代码就能够轻易实现一个常见布局的响应式页面，效果如
下：
AlexZ33
commented
4 years ago 我们先来讲讲页面缩放能解决1px问题的原理示。
首先大家需要了解一些 viewport 的常识，参考：这里
假如以下手机的 dpr=2
对于dpr=2的手机设备，1px就会有 2x2 的物理像素来渲染，但是当缩放以后其实就变成 1x1 个单位渲染了，看下面示意图：
所以，我们的思路就是将真个页面缩小dpr倍，再将页面的根字体放大dpr倍。这样页面虽然变小了，但是由于页面整体采用rem单位，当根字体放大dpr倍以后，整体都放大了，看上去整体样式没什么变化。
以上步骤最终整理的结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="box">
<div class="logo">Logo</div>
</div>
</body>
</html>
//获取屏幕宽度、dpr值
var deviceWidth = document.documentElement.clientWidth,
dpr = window.devicePixelRatio || 1;
//设置根字体扩大dpr倍
//由于deviceWidth当页面缩小dpr倍时，本身获取的值就增加dpr倍
//所以这里不需要再乘以dpr了
document.documentElement.style.fontSize = deviceWidth + 'px';
//设置页面缩放dpr倍
document.getElementsByName('viewport')[0]
.setAttribute('content','width=device-width;initial-scale=' + 1/dpr)
@function calc($val){
@return $val / 1080;
}
.logo{
width : calc(180rem);
}
.box{
border : 1px solid #ddd;
}
/* h5移动端1X屏、2X屏、3X屏的适应标准 */
@media screen and (min-width:320px){html{font-size: 100px}}
@media screen and (min-width:321px) and (max-width:375px){html{font-size: 110px}}
@media screen and (min-width:376px) and (max-width:420px){html{font-size: 118px}}参考 fastlclick =>
/**
* Windows Phone 8.1 fakes user agent string to look like Android and iPhone.
*
* @type boolean
*/
var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
/**
* Android requires exceptions.
*
* @type boolean
*/
var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0 && !deviceIsWindowsPhone;
/**
* iOS requires exceptions.
*
* @type boolean
*/
var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
/**
* iOS 4 requires an exception for select elements.
*
* @type boolean
*/
var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);
/**
* iOS 6.0-7.* requires the target element to be manually derived
*
* @type boolean
*/
var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS [6-7]_\d/).test(navigator.userAgent);
/**
* BlackBerry requires exceptions.
*
* @type boolean
*/
var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0;window.isAdvanceAndroid = checkAndroidVersion();
// 低版本手机不显示webp图片；
window.WEBP = isAdvanceAndroid ? 'webp' : 'png';
!isAdvanceAndroid && document.body.classList.add('low-version');
/**
* 判断当前Android版本是否属于高版本（4.4为分界点）
* 可兼容 Android 5.1.1/Android 5.1/Android 5 不同格式（最多保留一个小数点）
*/
function checkAndroidVersion() {
var result = /Android\s*(\d+\.?\d?)/i.exec(navigator.userAgent);
var androidVersion = result && result[1];
var isAdvance = true;
if(Number(androidVersion) < 4.4) {
isAdvance = false;
}
return isAdvance;
}
vue-h5-awsome
相关技术
文章集合
12个前端必会 H5 问题及解决方法
模拟器
vconsole
移动端调试
vConsole 腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题，因为我的 bug 严重到一进页面就报错，脆弱的 javascript 直接原地爆炸，页面一片空白
Charles Charles 是一款强大的抓包工具，可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本，通过配置 WIFI 代理，也可以拦截手机发出的请求。毕竟前端相当一部分报错是网络错误或数据不符合预期导致的（甩锅后端）。所以通过拦截 http 请求,查看具体的请求信息和数据，能获取很多有用的信息，可以在一定程度上帮助 debug。但是该软件是付费的（希望大家支持正版，要记住你也是一位开发），而且它定位不了 js 的报错，所以只能作为一个辅助工具。至于使用方法，网上很多介绍—— 此处一枚。
weinre weinre是一款很不错的网页检查工具，可以通过在本地启动一个 weinre 服务，并向手机网页嵌入一段 js 脚本来实现和电脑的通信，已达到类似浏览器开发工具那样的的调试效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不过这一切是在电脑上操作，而不是在手机上。微信web开发者工具的移动调试也是借助于此。附上一篇简单的使用介绍。因为我的 js 早就原地爆炸，它和 vConsole 一样，并没有帮到我什么。