个人中心
gpt4 book ai didi

html - 手机网页，但没占全屏

转载 作者：行者123 更新时间：2023-11-28 08:01:50 24 4
gpt4 key购买 nike

尝试编写移动网页，但在模拟的移动页面上并没有全屏显示(在我的 LG Pro 手机上也没有)。有什么原因吗？

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0"> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
        body { background-color:white; color:black }
    </style>
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
    <script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>

    <!--[if (gt IE 8) | (IEMobile)]><!-->
    <link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">

</head>
<body style="position:absolute; top:0; bottom:0; height=100%">
    <!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height=100%">

    <header id="top" role="banner">
        <div class="block">
            <h1 class="block-title">List</h1>
            <a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
        </div>
    </header>

    <nav id="nav" role="navigation">
        <div class="block">
            <h2 class="block-title">Chapters</h2>
            <ul>
                <li class="is-active"><a href="#">One</a></li>
                <li>
                    <a href="#">Two</a>
                </li><!--
             --><li>
                    <a href="#">Three</a>
                </li><!--
             --><li>
                    <a href="#">Four</a>
                </li><li>
                    <a href="#">Five</a>
                </li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Seven</a></li>
                <li><a href="#">Eight</a></li>
                <li><a href="#">Nine</a></li>
            </ul>
            <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
        </div>
    </nav>

    <div id="main" role="main" style="height=100%">
        <article class="block prose">

            <h1>Welcome To John's recollection</h1>

            Wonderful things in life


        </article>

    </div>

    <footer role="contentinfo">
        <div class="block prose">
            <p class="small">Copyright © John &amp; Joe</p>

        </div>
    </footer>

</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->

<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
    // When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});
</script>
</body>
</html>

最佳答案

首先，您有一些拼写错误需要更正:看一下 body style 属性(高度值)，你写道:

<body style="position:absolute; top:0; bottom:0; **height=100%"**>

但是你需要:

<body style="position:absolute; top:0; bottom:0; **height:100%"**>

首先修正页面上的那些错别字。

一个大错误就是让你的“ body ”变得绝对。请看一下定位的实际工作原理。 http://www.w3schools.com/css/css_positioning.asp

要解决此问题，请完全移除“body”定位。并制作另一个元素(在你的情况下为 div)，如果你真的需要它，它将被绝对定位。

如需更多帮助，请尝试为您的元素制作一些实例，以便我们更好地检查它。

如果没有看到您在 CSS 中所做的工作，我们无法确定此答案是否能解决您的问题。

但看起来您误解了定位的概念，并且使您的 DOM 和 CSS 过于复杂。

关于html - 手机网页，但没占全屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29718853/

24 4 0
文章推荐： css - 将半径添加到下拉列表
文章推荐： html - 获取滚动条以附加到正确的 div
文章推荐： jquery - 为 iSwiper iDangerous 分页使用自定义图标
文章推荐： html - Bootstrap - 3 列全响应全高介绍页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com