移动端页面px布局适配方案(viewport)

338 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

通过 <meta name="viewport"> 给视口设置固定的宽度,浏览器对页面自动缩放来实现页面的适配效果 可配合移动端手机网页适配iPad与折叠屏设备实现多平台兼容

简单描述下实现原理: 浏览器的宽度与取决于 <meta name="viewport"> 设置的视口宽度,与设备的真实宽度不直接关联。当你给视口设置了固定的值:例如750px,那么body的宽度就是750px,基于此我们就可以使用px布局了。 验证方法:给视口设置为750px的网页放一张设备实际宽度的图片看是否可以不产生滚动条就完全展示出来。

采用此方案的优点是可以使用px布局,不用额外进行rem或者vw等等单位的换算了 缺点是如果是无滚动条的页面在某些设备上(例如平板这种宽高3比4的,折叠屏8比7的)由于宽高比不同有些区域会被挤到视口之外从而导致一些体验上的问题,不过demo2也给出了解决方案;

这里给两个demo,demo1是有滚动条页面的示例,demo2是无滚动条页面的示例; 新建一个html文件将demo复制过去在浏览器打开即可

demo1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设计稿宽度为540px -->
    <meta name="viewport" content="width=540, user-scalable=no, target-densitydpi=device-dpi,minimum-scale=0,maximum-scale=5">
    <title>demo1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        .borderRadiusShadow {
            box-shadow: 0 0 8px rgba(0, 0, 0, .1);
            border-radius: 10px;
        }

        header {
            height: 335px;
            background: linear-gradient(to bottom, rgb(22, 121, 228) 0%, #ffffff 100%) no-repeat;
            margin-bottom: 10px;
        }

        h1 {
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
            font-weight: normal;
            margin-bottom: 15px;
        }

        ul {
            font-size: 0;
            display: flex;
            width: 100%;
            height: calc(100% - 70px);
            flex-direction: column;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-between;
        }

        li {
            width: 248px;
            height: 120px;
            padding: 20px 10px 0 17px;
            background-color: #ffffff;
            position: relative;
        }

        li>p {
            font-size: 30px;
            margin-bottom: 6px;
        }

        li>span {
            font-size: 16px;
        }

        li>img {
            width: 80px;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
        }

        .wrapper {
            width: 512px;
            margin: 0 auto;
        }

        .card {
            height: 392px;
            padding: 20px 25px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <header>
        <h1>首页</h1>
        <ul>
            <li class="borderRadiusShadow">
                <p>10</p>
                <span>名下设备数量</span>
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACCCAYAAACHHWC6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABaJSURBVHhe7Z2JdxzHccbz7+Xl5cWxo8Q2FSfxIds5HB+y48iOI1uy/ZLYUmRJiWPrSRYlx4rkSDKjg5coiSdAHCQBkABxElgAi3sBLK7F7mynvqrp3QHQ2GO651qq+L4HELsz0zP1m+ru6p6e31P3kVXpn1fdUxVvW+17m6pc2VD7lQJp1VeB/rbuf7atPG8PW/hb3x/W8UB4VY8AKLLDS+UltVdeIOXVbnle7e7P+Zr15f+fPsN38N1SeZG3LdM+qtWyv9fOtY4FwvN2Vamy7DuWnF/Wzg+I/rbHAgCQ/M30PQ1JqbJCgO34R+k86yggqqQKVQl7lcWjTiXVHd+eTPva3V+gY+3KgTvIOgYIhPNSeZkcFQj9JJODbRTcN46FKqVSLfmlyL5lHwhqI5Qrm+QscVBUIBzVQTDQGK2qil+o7FqmgfCq+3SHrrJD4oHgOAkUe9S+8DIeLTILBC68tBXIEeQQs6PilA8F9Uyy3LbIJBDID8AJ4gCTc5KTRKo85zqyaJkDwqO7D3dhslVEY0nZ5jIJRaaAQP+/DkN6gYA0sBVvyy99NiwzQHgEA7p4WYBBi8u6j+ojO1BkAghEhpIfGSS7aHZA+uR3S+n3rFQfqQeC2wz7WYRBS6DISqRINRDSgJTQm00YRHp8ZI+EUdQ0W2qBqNa6lu5h4H2y9CjnYfkONGwbVnUoqPqopjdSpBII5Bn08LTp4obR7n5O7ZSmVXF3TK1vDaq1zV61st6llgpX1OLaJRZ+Xy500Wc99J0BVdwZ5W2wrWmfYSTnlN4uaeqAwASW+oUzX9SWRXcjHLpJjl0r3iCHX1WLhcvsePyutbx+jRX8G4NC312mn2vFftrHXbVdusegGo/VhnBu0tBMX6RIFRDBNsPhi9ie8gTCjNrcvqtWN3rp7q9DoJ3fqoJwrKxT5NgeJjCm+RjmY7cmgYIiRTVdkSI1QGBCCy6yLQy7FBWKO+NqdRMRARBQNbDePghHJZEDYKxu9FHVM2o8fjvS55qm6iMVQHjVnVrX8vBFa12AaVZtbN0h50nbIExEaC6JGPh9fXtI7VIksokWaYMicSCQgaxHhrBA0PalnFovDlCdL2HeTVQ4XlKVXFWF4k2unmyh2E1JniJRIIIZSBsYdigyFDZv1pxkcmAU0sdbo+oJjdfwUNS7ueWEoUgMiAomwdJdwXdHaBhwd81SLwAwRFVFNFYNCuqJ7OzbRAofCo4UyVUfiQAh6Wh7GKA1jgzJwKAlUFD3dLOfzik8FAeSVwlBETsQiAz6brCLDHPU2u/38wrJwaAlUKAH0kuRAoksB1Ak0CWNFQiXGUjcjXCAyTlJCmVCFnSHGrnhqw99jeLPaMYGhCSddG/CfBGaC9tLm4GziAaHpEEcKQgKSXnbQYEbyAMUeOgkBosFCDfpaPQmctxmWOQ8QPLVRCMJFH2WDc06FHFFisiBkAykAxior59kb6J9Iasp4yB2XdL6tYsjTxEpEJKBtK8mAENh8xaDkA0YRLq8aO+4gSL6NkVkQKDguAD6REwn2Vw+DMXswaBVg8JVpOAuaXSRIhIgZEKsCxhymYZBqwYFRQrbkVKBIro0t3MgOB3tKgOZQDo6KgWhcJHmxqhuFFA4BUIykEKxFQy0rYxNZKUB2ZoEiitqtdhH18imSypQRJHRdAaEswmxdJLIQKLb1kkwaGko1tAltRglDWY0PYdzNJ0AIc9aSgGtYKBt0XfvVBi0BArJU9hEihoU9LurSGENBPIM9uloaXOscjWR3gyka9WTVy7S3G6gsAJCqok6peEEGHLULbuViQykawEKjH04TXNbWGgg3GUgAUPnNSDbEcZlpPdhn+bGT5veRyggZNqbCxiymYF0rSV/nqa7jGZ4KNoGouIwHY3IsHyfw6AlNwWgsJ2OZwdFW0CgfnKRgcRMZakmPoIhKH098FCRmzR3+xnNloHgOZDWj+RTZKDGU7LVRBfPagKQTkRhfmXjuuE44VSDwrpNUW/stzNxtyUgJANp/0g+tsdFjLMBCWct0U+05lfWu7kBNzz9c9U19C3Vbavb31T9I4+r3MIp6j72G48fRgKFP3Qe88TdpkDI0n+y2ptd0gnT3vA0VXxJJ0SCuZXz6sy1P1LjuZf4/wPjT6h3Lv8+/e2Pnej0tY+pM10fV7cnn2bgTOUIoxoUSF5ZTMerJ68W+MZuZg2BqHoVgmHFGgb0j+NOR69s9Kj86gX17pU/UOe7H1CT86+ohdUPVc+d75ADP6bOX3/Aic6RznZ/Qp3r/hM1RtDhuKbyhJFAoafj2aa5serusqqqxgu4NwQCK8RiR+EbkH414UcG00lHIVQT8yvn1IWeB9VZunvfu/5pNTn3mlpcu6h6h7/Hd/T563/mVKev/qEamX6Oo5CpTDaSSOFi4m6OXwHRaILmsUB4XikQbswHaCYewqY2Q5wTYnGHzi6fVpf6v8CRAc660HNCTc2/Rhf2kuobeZTu5k+o93o+6VSIOqMzz0cCBMSRYgNjH7hBQ0YK9iVmXe0cy4QRiGq1yq8WkIObd95MOHihOMB0x9dm6FFzS2fUtcGv+iB8ipz1KfV+74MMxCIB0X/3UfrsAXWh99NOda7742o0Fx0QEKBAtN0t2/hlVu1T1eEd8+4PIxAgSHLr4aPDOp7C5jowvgbk/PJZdf32txmEC70nCIQT7KwP+v5cTc6+wkDcuPsDAuJP+TOXQtQZm3khWiA4o3mZV7fBsLfpujcTtwUJCn4hjO/voBmBsFoplro4xZ0xOgE8kh8PDDhWbult1TP8CINwgSLC+wQBBCDe73tQzS6+w8sG3bj7mHqvl6JG32ecCpCN5X4VKRCQNDSvqc2dYbreFlXH/gLVBEdX7z8CBA9nW0QHzBlEn5yriphGLrFCzOD4v5HzP6k+6P9L0l/5+oy6eOPzanDySW5oLlIv4+bYj9SFvhP+99zpPTr2aO7FyIGQ9SnoutL5YImjcFBIr8OUmzgCRKmyZBEdpKoQiuOKDnLXzFF1MbN4iiNFXW+p2SWKDFRVoLG5sEZAjP6I7+gP+z/rVIhEY7EAoaME1qagqsMmSlQWj1QbB4DwqDEJcsIBkVdbe1N04XupsLLCSnzCynH9ar04yCvMBVWgv2FRD3w+NvuyunzrixQ1PseRw6VQPY3lThIQ7vIQjQQgEPWKpUm+9mafHC/4GDUBEo9BOwAE3l4nPYtwQGxuD1NB457+1sUJp+GpZ1XX7W+orqGvG/Qw6Wvq4s3Pq0s3v0B6yLk+6P8LNTHrNjHVSBIlrjDwpUrYKIHGJfISdTsABF5jGLa64OFsv+1gOoGoBAdMzv033aEn1KVbD1EEOE5fJH1JXRn4ckPhO/LdJho4uK+LNz6rxikCxQUEBCgwBU/aEma/NJL4esH3vlgNCLzktP4l8w6OF6qLCSqgFNJU+KgEB0zlX6W79HPq6uDfWOnKwF+rbookgxM/VbennqKfT1CDtK4h+v+dqWdU3+j3GILgtpco+ozP/Tp2IDBwhzU0w7clZtj72mpAVDBzmhqFYccsUF0k8Yg+6lEAcXngIXVt6O8s9bfqzr1n1QadCzKseGosKMz75J+bt9Q1ggDf19vi+JMxAwEhIqOtZPJJK0I7AlMbtNWAKFe26EN8qX0gsFNcrPgbkwLEvYXX6C79kuq+/VUL/T3pK9QtfUzNLLxJekNNGzSz+DuqGl6i9spX/G1k+6uDX1ZTVHUlAUSBJ9Rg8Mvsn0bizGVlw6cgAMS+t04fAob2gUBhVjd7Yq8uIAYi/1u+W6/f+bq1tINNn4m+wRHh8N9x/Mn53yQABPU26NpvlaaMvmkmAIE3G2qrAVGq4HWHYYGY9hcSTwaI6YX/5Tu2Z/jhxIToMpV/JREglte71dbuOPkiXPcTnQltdSD4rbjtwwBt793z8+wJRYiF1+ku/ZrqHfmHxITjT+X/h8tjKmdUkmt+1V9qOSQQ+/WeRgAI/T4r84bHCz2MSSpYMo/fSYR4ne/SvruPJKaekYep6no1ESDQjggNBGoEajtqCwARdkBLgMB4gqnAUWtl/brKLb5BTvmWujH6XaP6735b9Y1805mwv8PHwPHRuI0bCF66aC0SIMImpfJUZUxRlZHMk1cCxJuqf/QfqYfwzwb9k5qYf1nlV86q+ZUzpNMWOqPyq+fUeO55guA7B47TP/oIRarfJlRl2AGB9Ty0GdoQ7UOBTJnMbE4CiG7uCt4c+64amPjBAd0a/766Of6oWi8OkaN6HKmXR3MBxMDE92vHwvHRuAWgpnJGJbnmXdSoHCNfuGxUemv0Ib4UBgjqZdCdkRQQs0unyPmPqsHJHx7RwMTj6s70k2pi7lekF9SYhbD9xNxJ2t8TtN/HDhwHx59ZfD0RIHDtUW2HB2LZpyAARLmCga1wEQJPYuk5EKZCRykAkSMgcJcOTf3YKAZj8nHWoIVkHwLC4WPg+DPUlkkCCLvxDEypW/cpCAAh0+akTjFt2EgAaX1rKBEg0AefXfo/NTj1uLp9718S09DUD9XMUhJAIHU9wI41+aaZsF1wokwNCK9a8b8QAggSGjUoXPzVBgGx/BY55cdqePoniekOHT+39CZHLHM53QvXGtrYvkN+aL+6gGRORH0qXQ0ImM1cSiSnMDkkCSDmlt+mev1f1cjMk4f0hNF5thqZ+SnvO3isYTp+bul3XB5zOd0L11raDxPkg3DtB8zgDtoBIMqVAocQ08ZNhWqjOEiFjDsfQUCsvE1O+Ym6m3sqoH9XY7PPqKn8Scd6SY3P/1KN0P6DxwMks8unuDzmcroXIjJmg4UdoeZxjMqK732xA0B43r4PRJgD5KnawGzr7pijBIB4h5zypBqdfbom/H9u5V2+aJhT6UoAHk+AjfFxfnboeG9xeczldCt9jYtWcyEODn3DDgAB26Wdh602EH7WtjAMHmeU6Fbz5PjR2aeoa/hsQD9T00t4fA+O/JB+2guTdHFuAHBs7pkDx8PxEaniA+IKVdH6SS6zPxpJfDzHE6OCdgSI+vOc5h01FqLEOBU4zpwEAbH6rhqbf5pC+X8e0UT+vxzrF6SfHznO2PwzsQGBa7tU6LKcKYV5EPXuprYjQMDwlrvwUSLPM3iQTo0HCgBxmpzyH2pinhyWkHD8eYocUQMhMGAK/g2LybXyXEb10IxrmBGIMk+WCduWABRYc9J/WCdyKLpUfvWMmqS7dmrhucQ0SdEDkSpKIPTiZMh1SFa5fcE3HB3KhUOVhZgRCK/q0UY2C4vlOXO2ui7d0GihICDWzpJTfqHuLT6fmKYWfklgnqbyRAgErmPhmp+VDB8dMLp5+HkMbUYgYFisCiSFh2JBbe1O+mMcUWYwBYh7i89RI/KFxITj59cARNeh8rmRvqkk57Bw6Fq3Jl1VlL1NY3SAHQsEVTDcRxUgwkGBORbbdALI3kUHBYA4x3fp9NKLiQnHz6+d4fKYyxlecu3QiBwln4SDAQIMeFSzesxSALDjgSDDoiFWT4Kzooaii7qD59XM8knSSwnqRW7LuAaCr9lGd+j5Dlriw7yqNFlnqiEQiCtlD69K0js0H6y58jwJNKrqg3MDq2+QUzQUL8esk2p25VW1WPjAWL6wwrXCjeQGBixPWBSnNrDGQJBhNZmKt8Gp6bApUi3Uf2ghRwPFRYLiFDnmN2pm5WWVi0FynF+ruZU31ELhfWO5wqoeGca4EWi6nq2IfUa+Q84BvmxmTYEQq/IOnUCxS1BEFinQzf2Q79Q45TozK5GhSxWpzWC6hq3L72JW1ggGz/dlY2sRCFiVB7/cQEHVR8QNzfhkOn54SW+CYOApcebr15oAAyIDHsJpHhm0tQGEGJa1s+uOQjrFjYd7kpmcmzbVnmspYMDKvs2Agav98sGRzFasbSBg5TLmX9pCQb0Prj5kdPR+hqL+kBMiwzh3183XrLkEBjye1z4MsFBAwFAvuYACDU1k9+5nKPi8ERmomrCHQVcT4Sw0ELCy/zyoLRTbtS4pgLi/oNA3AdpVrmBovcVw1KyAgPEsK78BYypoawpGiqgamumTnCuqiVF7GMgHJYraqsXexHFmDQRwdAmFPEXe+VDUYEAD0iodDRjmuQpvtWvZyOyBgFWrsr6EJRR4W49kNDs7UuDc0O3G2ITpOrQq7v7T9d73CuSCo4uQhjE3QJCBTsyjsFmWSIRnRaNLcyctPidkIAGDiwwk9fiqyj4yaHMGhFg2MppJSUcGLP1sOufWJZFYqgk3kUGbYyD8SOEqo9lBkULOgaoJHqgyn29rAgwYxqaupYM2w2FzDoQ2N3kKv03h9z6ymKdAmXW53WUg20tHt2ORAQFDY0dOwgYKv/fhNzSzBIWGAUslyBB2chnIVi1SIGBlB5ECfXSuPjhSZCWjWS/nFrUZ7GY6yU21f+gpqygsciBgUn3YRQqBIjD2kfKMpoAro5ZuYEBvInqLBQgYIgU3NK2hqLcpTI5Ig3TZOANpnXQSGJDricNiAwKnU6YuKU7QBgoe+9ibpL58OjOaKJOe3OIOBve9ieMsNiDYkNF0AAUiBYaJ05bRlLI4mANJ16eegYwPBli8QJBhXh/e0WCfp0CXND3JK4kMknTC2IK5zM0lMMzLk1UxwwCLHQgYUq1uMpoaimQjBR8b6WjLpFMtMqAB6TgD2aolAgTMZUaTn/tICAqJDDKEbSpb60I12t6E2CgsMSDEZOKum4wmQeFP8Zf+f7TdUulWAkDpWprL1Zq4AcmRAXmGeHoTx1nCQIjhrtAXxXTBWhMeMNYvgZN1twUMs0PDS/YrMHRzj8eqAcnnnYs8A9mqpQIIWJkaUS4iBaqfAq9iox1HchAt9ERYDQOWOyj5xzSXpbkEhujT0e1YaoCASaSwhYK6pdT/l26pvLtCVyPQYUc3Ux0CvS0aj3bZR0hgQDURfkJsFJYqIGCAghuallBItJjnZXfW+OWqfso7AEdNuPsPRAAt3R7p5n3gvWLSAA4fFSCGgfbDQ9gJtxkOW+qAkIymizmaWlj4BAurjvNquwj1vIg5ObkeAeB4HxT6G3oN+A6+u749yBFBymIXFSANA8Cn7oScdIosdUCwIXnlJM0dVJ7qasAxSw3BKXby5s4IrwK7sXVbhN/pb+hC4ju7JdTviAZ2EUFLnw+efkuya9nI0gkEjDOarqEISjsawp0PBf9m2ia8cB6SgUw2z9DM0gsEWT3N7V9Qw4XOggQGHRmSyUC2aqkGQszdxN1kJBEOw/9pjgzaMgAETDKa2YNCYOAnqhxOlY/SMgKEmKs8RRxCGcM+kp+kZQoIWJlfBSV3nskRaZCUDz2U+quLsmKZAwLmZtGSaKRhjWNCbBSWSSBgDIVfR6OuNjknXklZkARD1Za+lFNrllkgYFiRFfkDfVeaHRW96mDmqfF7/CqxWbBMA4ELX6nucV2dTLTwj0lCGbAoaJZhgGUaCG1etUzRYoMcFF+0CEYF5ElQhk6wjgCCrYoFVvf8tgUad9E0OgU47FvaCp5HUSGFg1RhrXOAIINbkA30qiV/cAwOzPlODA+H3p73Rf8HdFgHPAuZx3ato4AIGu5ajBtgrW50AaW+Bxy4uyV6SNZTgyK/66qg/r2cfEb7wAtPsc9OigiHrWOBCJrAUZXIQT0TzFIqlRepMSgvidndn/GdT46nqgCf4ZF7vP7ao0YrIkEnQxC0+wKIj6x1+wiIjyxgSv0/UK3J7SyDCX0AAAAASUVORK5CYII=">
            </li>
            <li class="borderRadiusShadow">
                <p>212</p>
                <span>耗材领用数量</span>
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACCCAYAAACHHWC6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABaJSURBVHhe7Z2JdxzHccbz7+Xl5cWxo8Q2FSfxIds5HB+y48iOI1uy/ZLYUmRJiWPrSRYlx4rkSDKjg5coiSdAHCQBkABxElgAi3sBLK7F7mynvqrp3QHQ2GO651qq+L4HELsz0zP1m+ru6p6e31P3kVXpn1fdUxVvW+17m6pc2VD7lQJp1VeB/rbuf7atPG8PW/hb3x/W8UB4VY8AKLLDS+UltVdeIOXVbnle7e7P+Zr15f+fPsN38N1SeZG3LdM+qtWyv9fOtY4FwvN2Vamy7DuWnF/Wzg+I/rbHAgCQ/M30PQ1JqbJCgO34R+k86yggqqQKVQl7lcWjTiXVHd+eTPva3V+gY+3KgTvIOgYIhPNSeZkcFQj9JJODbRTcN46FKqVSLfmlyL5lHwhqI5Qrm+QscVBUIBzVQTDQGK2qil+o7FqmgfCq+3SHrrJD4oHgOAkUe9S+8DIeLTILBC68tBXIEeQQs6PilA8F9Uyy3LbIJBDID8AJ4gCTc5KTRKo85zqyaJkDwqO7D3dhslVEY0nZ5jIJRaaAQP+/DkN6gYA0sBVvyy99NiwzQHgEA7p4WYBBi8u6j+ojO1BkAghEhpIfGSS7aHZA+uR3S+n3rFQfqQeC2wz7WYRBS6DISqRINRDSgJTQm00YRHp8ZI+EUdQ0W2qBqNa6lu5h4H2y9CjnYfkONGwbVnUoqPqopjdSpBII5Bn08LTp4obR7n5O7ZSmVXF3TK1vDaq1zV61st6llgpX1OLaJRZ+Xy500Wc99J0BVdwZ5W2wrWmfYSTnlN4uaeqAwASW+oUzX9SWRXcjHLpJjl0r3iCHX1WLhcvsePyutbx+jRX8G4NC312mn2vFftrHXbVdusegGo/VhnBu0tBMX6RIFRDBNsPhi9ie8gTCjNrcvqtWN3rp7q9DoJ3fqoJwrKxT5NgeJjCm+RjmY7cmgYIiRTVdkSI1QGBCCy6yLQy7FBWKO+NqdRMRARBQNbDePghHJZEDYKxu9FHVM2o8fjvS55qm6iMVQHjVnVrX8vBFa12AaVZtbN0h50nbIExEaC6JGPh9fXtI7VIksokWaYMicSCQgaxHhrBA0PalnFovDlCdL2HeTVQ4XlKVXFWF4k2unmyh2E1JniJRIIIZSBsYdigyFDZv1pxkcmAU0sdbo+oJjdfwUNS7ueWEoUgMiAomwdJdwXdHaBhwd81SLwAwRFVFNFYNCuqJ7OzbRAofCo4UyVUfiQAh6Wh7GKA1jgzJwKAlUFD3dLOfzik8FAeSVwlBETsQiAz6brCLDHPU2u/38wrJwaAlUKAH0kuRAoksB1Ak0CWNFQiXGUjcjXCAyTlJCmVCFnSHGrnhqw99jeLPaMYGhCSddG/CfBGaC9tLm4GziAaHpEEcKQgKSXnbQYEbyAMUeOgkBosFCDfpaPQmctxmWOQ8QPLVRCMJFH2WDc06FHFFisiBkAykAxior59kb6J9Iasp4yB2XdL6tYsjTxEpEJKBtK8mAENh8xaDkA0YRLq8aO+4gSL6NkVkQKDguAD6REwn2Vw+DMXswaBVg8JVpOAuaXSRIhIgZEKsCxhymYZBqwYFRQrbkVKBIro0t3MgOB3tKgOZQDo6KgWhcJHmxqhuFFA4BUIykEKxFQy0rYxNZKUB2ZoEiitqtdhH18imSypQRJHRdAaEswmxdJLIQKLb1kkwaGko1tAltRglDWY0PYdzNJ0AIc9aSgGtYKBt0XfvVBi0BArJU9hEihoU9LurSGENBPIM9uloaXOscjWR3gyka9WTVy7S3G6gsAJCqok6peEEGHLULbuViQykawEKjH04TXNbWGgg3GUgAUPnNSDbEcZlpPdhn+bGT5veRyggZNqbCxiymYF0rSV/nqa7jGZ4KNoGouIwHY3IsHyfw6AlNwWgsJ2OZwdFW0CgfnKRgcRMZakmPoIhKH098FCRmzR3+xnNloHgOZDWj+RTZKDGU7LVRBfPagKQTkRhfmXjuuE44VSDwrpNUW/stzNxtyUgJANp/0g+tsdFjLMBCWct0U+05lfWu7kBNzz9c9U19C3Vbavb31T9I4+r3MIp6j72G48fRgKFP3Qe88TdpkDI0n+y2ptd0gnT3vA0VXxJJ0SCuZXz6sy1P1LjuZf4/wPjT6h3Lv8+/e2Pnej0tY+pM10fV7cnn2bgTOUIoxoUSF5ZTMerJ68W+MZuZg2BqHoVgmHFGgb0j+NOR69s9Kj86gX17pU/UOe7H1CT86+ohdUPVc+d75ADP6bOX3/Aic6RznZ/Qp3r/hM1RtDhuKbyhJFAoafj2aa5serusqqqxgu4NwQCK8RiR+EbkH414UcG00lHIVQT8yvn1IWeB9VZunvfu/5pNTn3mlpcu6h6h7/Hd/T563/mVKev/qEamX6Oo5CpTDaSSOFi4m6OXwHRaILmsUB4XikQbswHaCYewqY2Q5wTYnGHzi6fVpf6v8CRAc660HNCTc2/Rhf2kuobeZTu5k+o93o+6VSIOqMzz0cCBMSRYgNjH7hBQ0YK9iVmXe0cy4QRiGq1yq8WkIObd95MOHihOMB0x9dm6FFzS2fUtcGv+iB8ipz1KfV+74MMxCIB0X/3UfrsAXWh99NOda7742o0Fx0QEKBAtN0t2/hlVu1T1eEd8+4PIxAgSHLr4aPDOp7C5jowvgbk/PJZdf32txmEC70nCIQT7KwP+v5cTc6+wkDcuPsDAuJP+TOXQtQZm3khWiA4o3mZV7fBsLfpujcTtwUJCn4hjO/voBmBsFoplro4xZ0xOgE8kh8PDDhWbult1TP8CINwgSLC+wQBBCDe73tQzS6+w8sG3bj7mHqvl6JG32ecCpCN5X4VKRCQNDSvqc2dYbreFlXH/gLVBEdX7z8CBA9nW0QHzBlEn5yriphGLrFCzOD4v5HzP6k+6P9L0l/5+oy6eOPzanDySW5oLlIv4+bYj9SFvhP+99zpPTr2aO7FyIGQ9SnoutL5YImjcFBIr8OUmzgCRKmyZBEdpKoQiuOKDnLXzFF1MbN4iiNFXW+p2SWKDFRVoLG5sEZAjP6I7+gP+z/rVIhEY7EAoaME1qagqsMmSlQWj1QbB4DwqDEJcsIBkVdbe1N04XupsLLCSnzCynH9ar04yCvMBVWgv2FRD3w+NvuyunzrixQ1PseRw6VQPY3lThIQ7vIQjQQgEPWKpUm+9mafHC/4GDUBEo9BOwAE3l4nPYtwQGxuD1NB457+1sUJp+GpZ1XX7W+orqGvG/Qw6Wvq4s3Pq0s3v0B6yLk+6P8LNTHrNjHVSBIlrjDwpUrYKIHGJfISdTsABF5jGLa64OFsv+1gOoGoBAdMzv033aEn1KVbD1EEOE5fJH1JXRn4ckPhO/LdJho4uK+LNz6rxikCxQUEBCgwBU/aEma/NJL4esH3vlgNCLzktP4l8w6OF6qLCSqgFNJU+KgEB0zlX6W79HPq6uDfWOnKwF+rbookgxM/VbennqKfT1CDtK4h+v+dqWdU3+j3GILgtpco+ozP/Tp2IDBwhzU0w7clZtj72mpAVDBzmhqFYccsUF0k8Yg+6lEAcXngIXVt6O8s9bfqzr1n1QadCzKseGosKMz75J+bt9Q1ggDf19vi+JMxAwEhIqOtZPJJK0I7AlMbtNWAKFe26EN8qX0gsFNcrPgbkwLEvYXX6C79kuq+/VUL/T3pK9QtfUzNLLxJekNNGzSz+DuqGl6i9spX/G1k+6uDX1ZTVHUlAUSBJ9Rg8Mvsn0bizGVlw6cgAMS+t04fAob2gUBhVjd7Yq8uIAYi/1u+W6/f+bq1tINNn4m+wRHh8N9x/Mn53yQABPU26NpvlaaMvmkmAIE3G2qrAVGq4HWHYYGY9hcSTwaI6YX/5Tu2Z/jhxIToMpV/JREglte71dbuOPkiXPcTnQltdSD4rbjtwwBt793z8+wJRYiF1+ku/ZrqHfmHxITjT+X/h8tjKmdUkmt+1V9qOSQQ+/WeRgAI/T4r84bHCz2MSSpYMo/fSYR4ne/SvruPJKaekYep6no1ESDQjggNBGoEajtqCwARdkBLgMB4gqnAUWtl/brKLb5BTvmWujH6XaP6735b9Y1805mwv8PHwPHRuI0bCF66aC0SIMImpfJUZUxRlZHMk1cCxJuqf/QfqYfwzwb9k5qYf1nlV86q+ZUzpNMWOqPyq+fUeO55guA7B47TP/oIRarfJlRl2AGB9Ty0GdoQ7UOBTJnMbE4CiG7uCt4c+64amPjBAd0a/766Of6oWi8OkaN6HKmXR3MBxMDE92vHwvHRuAWgpnJGJbnmXdSoHCNfuGxUemv0Ib4UBgjqZdCdkRQQs0unyPmPqsHJHx7RwMTj6s70k2pi7lekF9SYhbD9xNxJ2t8TtN/HDhwHx59ZfD0RIHDtUW2HB2LZpyAARLmCga1wEQJPYuk5EKZCRykAkSMgcJcOTf3YKAZj8nHWoIVkHwLC4WPg+DPUlkkCCLvxDEypW/cpCAAh0+akTjFt2EgAaX1rKBEg0AefXfo/NTj1uLp9718S09DUD9XMUhJAIHU9wI41+aaZsF1wokwNCK9a8b8QAggSGjUoXPzVBgGx/BY55cdqePoniekOHT+39CZHLHM53QvXGtrYvkN+aL+6gGRORH0qXQ0ImM1cSiSnMDkkCSDmlt+mev1f1cjMk4f0hNF5thqZ+SnvO3isYTp+bul3XB5zOd0L11raDxPkg3DtB8zgDtoBIMqVAocQ08ZNhWqjOEiFjDsfQUCsvE1O+Ym6m3sqoH9XY7PPqKn8Scd6SY3P/1KN0P6DxwMks8unuDzmcroXIjJmg4UdoeZxjMqK732xA0B43r4PRJgD5KnawGzr7pijBIB4h5zypBqdfbom/H9u5V2+aJhT6UoAHk+AjfFxfnboeG9xeczldCt9jYtWcyEODn3DDgAB26Wdh602EH7WtjAMHmeU6Fbz5PjR2aeoa/hsQD9T00t4fA+O/JB+2guTdHFuAHBs7pkDx8PxEaniA+IKVdH6SS6zPxpJfDzHE6OCdgSI+vOc5h01FqLEOBU4zpwEAbH6rhqbf5pC+X8e0UT+vxzrF6SfHznO2PwzsQGBa7tU6LKcKYV5EPXuprYjQMDwlrvwUSLPM3iQTo0HCgBxmpzyH2pinhyWkHD8eYocUQMhMGAK/g2LybXyXEb10IxrmBGIMk+WCduWABRYc9J/WCdyKLpUfvWMmqS7dmrhucQ0SdEDkSpKIPTiZMh1SFa5fcE3HB3KhUOVhZgRCK/q0UY2C4vlOXO2ui7d0GihICDWzpJTfqHuLT6fmKYWfklgnqbyRAgErmPhmp+VDB8dMLp5+HkMbUYgYFisCiSFh2JBbe1O+mMcUWYwBYh7i89RI/KFxITj59cARNeh8rmRvqkk57Bw6Fq3Jl1VlL1NY3SAHQsEVTDcRxUgwkGBORbbdALI3kUHBYA4x3fp9NKLiQnHz6+d4fKYyxlecu3QiBwln4SDAQIMeFSzesxSALDjgSDDoiFWT4Kzooaii7qD59XM8knSSwnqRW7LuAaCr9lGd+j5Dlriw7yqNFlnqiEQiCtlD69K0js0H6y58jwJNKrqg3MDq2+QUzQUL8esk2p25VW1WPjAWL6wwrXCjeQGBixPWBSnNrDGQJBhNZmKt8Gp6bApUi3Uf2ghRwPFRYLiFDnmN2pm5WWVi0FynF+ruZU31ELhfWO5wqoeGca4EWi6nq2IfUa+Q84BvmxmTYEQq/IOnUCxS1BEFinQzf2Q79Q45TozK5GhSxWpzWC6hq3L72JW1ggGz/dlY2sRCFiVB7/cQEHVR8QNzfhkOn54SW+CYOApcebr15oAAyIDHsJpHhm0tQGEGJa1s+uOQjrFjYd7kpmcmzbVnmspYMDKvs2Agav98sGRzFasbSBg5TLmX9pCQb0Prj5kdPR+hqL+kBMiwzh3183XrLkEBjye1z4MsFBAwFAvuYACDU1k9+5nKPi8ERmomrCHQVcT4Sw0ELCy/zyoLRTbtS4pgLi/oNA3AdpVrmBovcVw1KyAgPEsK78BYypoawpGiqgamumTnCuqiVF7GMgHJYraqsXexHFmDQRwdAmFPEXe+VDUYEAD0iodDRjmuQpvtWvZyOyBgFWrsr6EJRR4W49kNDs7UuDc0O3G2ITpOrQq7v7T9d73CuSCo4uQhjE3QJCBTsyjsFmWSIRnRaNLcyctPidkIAGDiwwk9fiqyj4yaHMGhFg2MppJSUcGLP1sOufWJZFYqgk3kUGbYyD8SOEqo9lBkULOgaoJHqgyn29rAgwYxqaupYM2w2FzDoQ2N3kKv03h9z6ymKdAmXW53WUg20tHt2ORAQFDY0dOwgYKv/fhNzSzBIWGAUslyBB2chnIVi1SIGBlB5ECfXSuPjhSZCWjWS/nFrUZ7GY6yU21f+gpqygsciBgUn3YRQqBIjD2kfKMpoAro5ZuYEBvInqLBQgYIgU3NK2hqLcpTI5Ig3TZOANpnXQSGJDricNiAwKnU6YuKU7QBgoe+9ibpL58OjOaKJOe3OIOBve9ieMsNiDYkNF0AAUiBYaJ05bRlLI4mANJ16eegYwPBli8QJBhXh/e0WCfp0CXND3JK4kMknTC2IK5zM0lMMzLk1UxwwCLHQgYUq1uMpoaimQjBR8b6WjLpFMtMqAB6TgD2aolAgTMZUaTn/tICAqJDDKEbSpb60I12t6E2CgsMSDEZOKum4wmQeFP8Zf+f7TdUulWAkDpWprL1Zq4AcmRAXmGeHoTx1nCQIjhrtAXxXTBWhMeMNYvgZN1twUMs0PDS/YrMHRzj8eqAcnnnYs8A9mqpQIIWJkaUS4iBaqfAq9iox1HchAt9ERYDQOWOyj5xzSXpbkEhujT0e1YaoCASaSwhYK6pdT/l26pvLtCVyPQYUc3Ux0CvS0aj3bZR0hgQDURfkJsFJYqIGCAghuallBItJjnZXfW+OWqfso7AEdNuPsPRAAt3R7p5n3gvWLSAA4fFSCGgfbDQ9gJtxkOW+qAkIymizmaWlj4BAurjvNquwj1vIg5ObkeAeB4HxT6G3oN+A6+u749yBFBymIXFSANA8Cn7oScdIosdUCwIXnlJM0dVJ7qasAxSw3BKXby5s4IrwK7sXVbhN/pb+hC4ju7JdTviAZ2EUFLnw+efkuya9nI0gkEjDOarqEISjsawp0PBf9m2ia8cB6SgUw2z9DM0gsEWT3N7V9Qw4XOggQGHRmSyUC2aqkGQszdxN1kJBEOw/9pjgzaMgAETDKa2YNCYOAnqhxOlY/SMgKEmKs8RRxCGcM+kp+kZQoIWJlfBSV3nskRaZCUDz2U+quLsmKZAwLmZtGSaKRhjWNCbBSWSSBgDIVfR6OuNjknXklZkARD1Za+lFNrllkgYFiRFfkDfVeaHRW96mDmqfF7/CqxWbBMA4ELX6nucV2dTLTwj0lCGbAoaJZhgGUaCG1etUzRYoMcFF+0CEYF5ElQhk6wjgCCrYoFVvf8tgUad9E0OgU47FvaCp5HUSGFg1RhrXOAIINbkA30qiV/cAwOzPlODA+H3p73Rf8HdFgHPAuZx3ato4AIGu5ajBtgrW50AaW+Bxy4uyV6SNZTgyK/66qg/r2cfEb7wAtPsc9OigiHrWOBCJrAUZXIQT0TzFIqlRepMSgvidndn/GdT46nqgCf4ZF7vP7ao0YrIkEnQxC0+wKIj6x1+wiIjyxgSv0/UK3J7SyDCX0AAAAASUVORK5CYII=">

            </li>
            <li class="borderRadiusShadow">
                <p>22</p>
                <span>固定资产申请单数量</span>
                <img src="data:image/png;base64,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">

            </li>
            <li class="borderRadiusShadow">
                <p>340</p>
                <span>耗材资产申请单数量</span>
                <img src="data:image/png;base64,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">

            </li>
        </ul>
    </header>
    <div class="wrapper">
        <div class="card borderRadiusShadow">
            <h4>待办事项</h4>
        </div>
        <div class="card borderRadiusShadow">
            <h4>提醒事项</h4>
        </div>
    </div>
</body>

</html>

demo2

基本原理就是设定一个可以展示完整功能区域的宽高比作为临界值,若是可以就给viewport设置为固定的宽度让浏览器自适应,若是不行让viewport为设备原始的视口宽度给页面的body等设置固定的宽度然后居中即可。

注:下面的js中的0.6跟css媒体查询中的3/5 (3➗5=0.6 )就是宽高比 这个宽高比我是通过chrome的移动设备模拟器来得出的,即将设备类型调整为responsive,然后手动去调整得到一个最小的可展示内容区域的宽高比,以此demo为例,调整之后看下div 008的位置是否在页面内即可

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>无滚动条demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        div {
            height: 162px;
            line-height: 3;
            color: black;
            font-size: 52px;
            text-align: center;
            font-weight: bolder;
        }
        
        @media screen and (min-aspect-ratio: 3/5) {
	
            body,
            html {
                width: 750px;
                margin: 0 auto;
            }

        }
    </style>
    <script>
        //移动端版本兼容
        var phoneWidth = parseInt(window.screen.width);
        var phoneHeight = parseInt(window.screen.height);

        if (phoneWidth / phoneHeight >= 0.6) {
            document.write('<meta name="viewport" content="width=deviceWidth, user-scalable=no, target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
</head>

<body>
    <div>001</div>
    <div>002</div>
    <div>003</div>
    <div>004</div>
    <div>005</div>
    <div>006</div>
    <div>007</div>
    <div>008</div>
    <div>009</div>
    <div>010</div>
</body>

</html>

我的个人公众号:归元田居 每日分享前端知识与资讯~