PC 打开 vue h5移动端页面不变形《转载》

最新推荐文章于 2024-07-20 18:16:53 发布

TwoBE9876

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量1.3k

点赞数

分类专栏： vue html 移动端文章标签：前端

原文链接：https://blog.csdn.net/wyk304443164/article/details/122179945

版权

html 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

vue

24 篇文章 3 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

有时候，我们想让pc打开适配手机的h5，并且不变形，在不使用媒体查询的情况下，我们可以使用以下方式：

实现功能如下

pc打开

在这里插入图片描述

周围留空白，居中显示

当浏览器切换为手机模式/手机打开网址时

在这里插入图片描述

会变为手机模式

以下为主要代码

public 文件夹下 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script async="" src="https://www.google-analytics.com/analytics.js"></script>
    <script async="" src="https://www.google-analytics.com/analytics.js"></script>
    <script type="text/javascript">window.alert = console.log;</script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Title</title>
    <meta http-equiv="Cache-Control" content="max-age=180">
    <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">
    <link rel="dns-prefetch" href="//m.360buyimg.com">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <script type="text/javascript">
        // 如果判断下来是pc 那么跳转嵌入 iframe h5
        ~function () {
            // 是不是移动端
            var isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
            // 在iframe内
            var inIframe = window.frames.length != parent.frames.length;
            if (!isMobile && !inIframe) {
                window.location.href = "pc.html"
            }
        }()
    </script>

</head>
<body>

<div id="app"></div>

<script type="module" src="/src/main.ts"></script>
</body>
</html>

同级新建pc.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PC</title>

    <script type="text/javascript">
        // 如果判断下来是pc 那么跳转嵌入 iframe h5
        ~function () {
            // 是不是移动端
            var isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
            console.log(isMobile);
            if (isMobile) {
                window.location.href = "index.html"
            }
        }()
    </script>


</head>
<body style="background: #42b983">

<iframe style="background: white; display: block; margin: 0 auto;" width="414" height="716" src="./index.html" frameborder="0"></iframe>

</body>
</html>

主要实现是

index.html 在 iframe 内时就不要跳转了，上面逻辑写的很明白

---------------------------------------------------------------------------------------------------------------------------------

个人理解，光看js大概就是判断是什么设备，然后切换html。导入的那些我都不懂

TwoBE9876

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PC 打开 vue h5移动端页面不变形《转载》

有时候，我们想让pc打开适配手机的h5，并且不变形，在不使用媒体查询的情况下，我们可以使用以下方式：实现功能如下pc打开周围留空白，居中显示当浏览器切换为手机模式/手机打开网址时会变为手机模式以下为主要代码public 文件夹下 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script as..
复制链接

扫一扫