移动端页面适配 – H5 – 适配

发布： 2022年2月8日 • 经验百科

移动端常用的页面适配方案

使用css设置rem根字体大小

1rem = 100px
设计稿宽度: 750px
一屏宽度: 100vw
公式: 根字体大小 = (100 / 750 * 100vw);

html {
  font-size: calc(100 / 750 * 100vw);
}

body {
  font-size: 1rem;
}

使用javascript动态设置rem根字体大小

mode: {
  rem: *css样式使用rem单位
  scale: *css样式使用px单位
  px: *css样式使用px单位
}
designWidth: 设计稿宽度

(function (mode) {
  var win = window
  var doc = document
  var designWidth = 750
  if (/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
    var head = document.getElementsByTagName('head')[0];
    var headMeta = [
      '<meta name="apple-mobile-web-app-capable" content="yes">',
      '<meta name="apple-mobile-web-app-status-bar-style" content="black">',
      '<meta name="format-detection" content="telephone=no">',
      '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />',
    ]
    for (var i = 0; i < headMeta.length; i++) {
      head.insertAdjacentHTML('beforeEnd', headMeta[i])
    }
    switch (mode) {
      case 'scale':
        head.insertAdjacentHTML('beforeEnd', `<meta name="viewport" content="width=${designWidth}" />`)
        break
      case 'px':
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function(){function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode='android-2.2',d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode='android-2.2':4.4>d?b.mode='android-dpi':d>=4.4&&(b.mode=b.dWidth>b.uWidth?'android-dpi':'android-scale')),void 0)}function d(){var e,f,g,h,c='',d=!1;switch(b.mode){case'apple':f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c='width='+b.uWidth+',initial-scale='+f+',minimum-scale='+f+',maximum-scale='+f+',user-scalable=no';break;case'android-2.2':a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode='android-dpi',d=!0;case'android-dpi':f=160*b.uWidth/b.dWidth*b.ratio,c='target-densitydpi='+f+', width='+b.uWidth+', user-scalable=no',d&&(b.mode='android-2.2');break;case'android-scale':c='width='+b.uWidth+', user-scalable=no'}g=document.querySelector('meta[name="viewport"]')||document.createElement('meta'),g.name='viewport',g.content=c,h=document.getElementsByTagName('head'),h.length>0&&h[0].appendChild(g)}function e(){var a='';for(key in b)a+=key+': '+b[key]+'; ';alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:'apple',userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:750})}
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
      case 'rem':
        var html = doc.documentElement
        var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize'
        var setFont = function () {
          var clientWidth = html.clientWidth
          html.style.fontSize = 100 * (clientWidth / designWidth) + 'px'
        };
        setFont()
        win.addEventListener('load', setFont, false)
        win.addEventListener(resizeEvent, setFont, false)
        doc.addEventListener('DOMContentLoaded', setFont, false)
        break
    }
  }
})('rem')

推荐这些文章：

超详细讲解H5移动端适配

前言
移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现的一致，前端工程师就不得不对页面进行移动端适配了。
「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注前端南玖第一时间获取最新文章～」
前置知识
在学习移动端适配前我们需要了解一些相关的前置知识。

屏幕尺寸

屏幕尺寸指的是以屏幕对角线的长度来计算的，单位是英寸。1英寸=2.54厘米

电子设备一般都用英寸来描述屏幕的物理大小，比如我们电脑常见的22、27英寸。英寸...

H5 移动端禁止用户手动缩放

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的...

【Css】页面自适应

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
【一】在网页代码的头部，加入一行viewport标签
width - viewport的宽度 - （width=device-width 网页宽度默认等于屏幕宽度）
height - viewport的...

移动端设备上的页面比例始终是1：1

...

页面适配移动端

前提：我使用的是vue-cli2创建的项目其中使用了vant移动端组件库，近期有项目需要项目适配大屏的需求。但是由于平时我们使用的组件库的单位都是px 所以页面需要适配pc和移动端。所以进过大佬点拨找到了2个解决方案

px2rem-loader 将px转换为rem适配移动端
下载以下两个依赖
npm i lib-flexible --save
npm i px2rem-loader
在main.js中引入
import 'lib-flexible/flexible'
然后在build文件夹中找到utils.js 将px2rem-loader 添加到cssLoaders中,
同时，在gene...

H5实现移动端禁止页面缩放（适用Android和IOS）

要实现Android和IOS浏览器禁止页面缩放，通用的设置方式是给HTML页面设置meta标签来实现，具体添加标签内容如下：

标签属性说明：

width 　　　　　　　　 // 设置 viewport 的宽度，正整数/字符串 device-width
height 　　　　　　　　 // 设置 viewport 的高度...

禁止微信字体缩放 - H5 - 适配

移动端页面使用REM适配在微信中会受字体缩放影响导致排版错位等问题
解决方案
/**
* 限制微信字体放大
*/
(function () {
if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
handleFontSize()
} else {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', hand...

将前端HTML页面生成图片，用html2canvas.js将前端HTML页面生成图片

首先去html2canvas官网下载html2canvas.js文件
html2canvas官网地址：http://html2canvas.hertzen.com/
HTML

<div id="host_file" class="container">
<div id="view" class="print_wrap">
<div class="host_file_top_title_box">
<p>111111111111</p>
...

不同页面点击添加class

$(".scrollMenuItem a").each(function() {
var _this = $(this);
if (window.location.href.indexOf(_this.attr('href')) > -1) {
_this.addClass("active").siblings().removeClass("active");
};
});

...

处理IOS键盘弹出将h5页面放大的问题

这个问题很好解决，只用在html文件的head中加入或者替换为以下代码：

本文来自博客园，作者：不如饲猪，转载请注明原文链接：https://www.cnblogs.com/ifeelthecall/p/16092996.html

...

文章标题：移动端页面适配 – H5 – 适配
文章链接：https://www.dianjilingqu.com/50956.html
本文章来源于网络，版权归原作者所有，如果本站文章侵犯了您的权益，请联系我们删除，联系邮箱：saisai#email.cn，感谢支持理解。

THE END

缓冲区溢出实例

< <上一篇

vue3中组合式api中常用的函数功能介绍

下一篇>>