为什么我的 DIV 没有显示在移动浏览器中，而是显示在桌面浏览器中？

Question

我敢肯定，这是一个非常笼统的问题，并为标题道歉，但不知道该怎么说。

背景：VisualStudio 2022 预览版、.Net 4.8、ASP.Net（非核心）

索引.aspx

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        iframe {
            position: absolute;
            border: solid ;
            border-width: 1px;
            box-sizing: border-box;
            min-width: 855px;
            min-height: 465px;
        }
    </style>
    
    <div class="divCanvas">
        <canvas id="compass" height="230" width="230"></canvas>
    </div>

    <iframe id="if1" 
        src="https://awebsite">
    </iframe>
</asp:Content>

CSS

#compass {
    background: url("../images/compass2.png");
    background-size: cover;
    vertical-align: middle;
}

.divCanvas
{
    z-index:99;
    position:absolute;
    margin-left: 525px;
    margin-top: 70px;
}

所以我们这里有一个简单的<iframe>向我展示了一个网站并使用 CSS 和<div>我在 iframe 上覆盖了一个<canvas>对象，是的，在一个特定的位置，它覆盖了 iframe 的一个区域，其中我希望它显示，因此margin-left和margin-right属性。

问题是，这仅适用于桌面浏览器（所有这些），但除了在移动浏览器中显示iframe之外什么都不做（再次全部显示）。 我的<div>怎么了？

顺便说一句，VS 项目生成了一个ViewSwitcher.ascx文件，我认为这是这里的问题，但它并没有突出代码中移动浏览器发生的任何事情。

请问有什么想法吗？ 我应该以某种方式使用ViewSwitcher ascx 文件在iframe上显示我的div吗？ 我不知道viewswitcher一开始到底在做什么，或者是否需要它。

谢谢

Answer 1

您可以使用媒体查询来更改移动浏览器的输出

Answer 2

答案是缺乏设计。 基本上，我缺少Site.Master文件的Site.Mobile.Master移动版本，并且我必须包含对桌面版本相同 CSS 的引用。 是的，我希望移动版能像桌面一样运行！

<webopt:bundlereference

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Mobile.master.cs" Inherits="mysite.Site_Mobile" %>
<%@ Register Src="~/ViewSwitcher.ascx" TagPrefix="friendlyUrls" TagName="ViewSwitcher" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Refresh" content="60" />

    <title>mywebsite</title>

    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <webopt:bundlereference runat="server" path="~/Content/css" />
</head>
<body>
    <form id="form2" runat="server">
        <div>
            <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
            <section class="content-wrapper main-content clear-fix">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <friendlyUrls:ViewSwitcher runat="server" />
        </div>
    </form>
</body>
</html>

为什么我的 DIV 没有显示在移动浏览器中，而是显示在桌面浏览器中？

问题描述

1 个解决方案

解决方案1
3 2022-07-01 07:13:24

解决方案2
0 已采纳 2022-07-08 04:05:25

为什么我的 DIV 没有显示在移动浏览器中，而是显示在桌面浏览器中？

问题描述

1 个解决方案

解决方案1 3 2022-07-01 07:13:24

解决方案2 0 已采纳 2022-07-08 04:05:25

解决方案1
3 2022-07-01 07:13:24

解决方案2
0 已采纳 2022-07-08 04:05:25