web前端实现局部左右滑动_前端实现左右滑动-优快云博客

本文链接：https://blog.youkuaiyun.com/weshouldhelp/article/details/83176612

这个示例展示了如何在web前端实现一个全屏的、支持局部左右滑动的效果。代码包括HTML、CSS和JavaScript，主要调整了页面的字体大小以适配不同设备，并实现了在不同设备上自动调整布局的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="../css/caishunqiall.css">-->
    <!--
    <script>
        //通过window.screen.width获取屏幕的宽度
        var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
        document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
    </script>
 -->
    <script type="text/javascript">
        (function(doc, win) {
            var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function() {
                var width = docEl.clientWidth;
                if (width / dpr &