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

发布于 2025-02-12 01:42:32 字数 1672 浏览 0 评论 0原文

我敢肯定，非常通用的问题，并为标题表示歉意，但不确定该如何看待这个问题。

背景：VisualStudio 2022 Preview，.NET 4.8，ASP.NET（NOCER）

index.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;
}

因此我们在这里拥有的是一个简单的＆lt; iframe＆gt;向我展示一个网站和使用CSS和＆lt; div＆gt;我正在覆盖＆lt; canvas＆gt;对象，而在特定spot ，以便它覆盖了我想要显示的iframe的区域，因此保证金 - 左和rabin-right properties。

问题是，这仅适用于桌面浏览器（全部），但除了在移动浏览器中显示iframe外，其他任何事情都没有其他作用（又是所有这些>。我的＆lt; div＆gt;发生了什么？

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

有什么想法吗？我是否应该以某种方式使用ViewSwitcher ASCX文件，以通过iframe显示我的div？我不知道ViewSwitcher首先在这里确实在做什么，或者甚至需要什么。

谢谢

原文

Very generic issue I am sure, and apologies for the title, but not sure how else to word this.

Background: VisualStudio 2022 preview, .Net 4.8, ASP.Net (not Core)

index.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;
}

So what we have here is a simple <iframe> showing me a website and using CSS and <div> I am overlaying a <canvas> object over the iframe, and yes in a specific spot so that it overlays an area of the iframe where I want it displayed, hence the margin-left and margin-right properties.

Problem is, this only works on desktop browsers (all of them), but does nothing other than show the iframe in a mobile browser (all of them again). What's happened with my <div>?

Incidentally, the VS project generated a ViewSwitcher.ascx file, which I think is the issue here, but it doesn't stand out where in the code there is anything happening for mobile browsers.

Any ideas please? Should I be using the ViewSwitcher ascx file in some way to display my div over the iframe? I have no idea what viewswitcher is really doing here in the first place or if it's even needed.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2025-02-19 01:42:32

答案是缺乏设计。基本上，我缺少site.mobile.master.master site.master.master文件的移动版本，我必须在桌面版本中包括对相同CSS的引用。是的，我希望手机版本像桌面一样！

＆lt; 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>

The answer was in lack of design. Basically, I was missing the Site.Mobile.Master mobile version of the Site.Master file, and I had to include the reference to the same CSS for the desktop version. Yes, I wanted the mobile version to act like the desktop!

<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>

回复收藏 0 原文

~没有更多了~