个人中心
gpt4 book ai didi

javascript - Web 应用程序视口(viewport)问题

转载 作者：行者123 更新时间：2023-11-28 14:46:14 25 4
gpt4 key购买 nike

请查看屏幕截图，它在 ipad 中工作正常但在 iphone/iphone4 中不工作。页面需要哪些 css/viewport 设置完全适合窗口(无滚动)。

iPad 截图 enter image description here

iphone4截图 enter image description here

手机截图 enter image description here

这是html代码

<!DOCTYPE html>

<html>
<head>
    <title>Home</title>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;user-scalability:no;">

    <link rel="stylesheet" href="../Common/mobile.css" />
    <script type="text/javascript" src="../Common/jquery-1.5.min.js"></script>  

</head>

<body>
<div class="texture">
    <!-- Start of first page -->
    <div id="eco-home-page" data-role="page" class="splash">
        <div data-role="content">           
            <a id="logo" href="#"><img width="100px" src="../Images/1.jpg" /></a>
            <div id="start-btns">
                <a href="#"><img src="../Images/1.jpg" /></a>
                <a href="#"><img src="../Images/1.jpg" /></a>
                <a href="#"><img src="../Images/1.jpg" /></a>
                <a href="#"><img src="../Images/1.jpg" /></a>
            </div>
        </div>
    </div>

</div>

</body>
</html>

这是CSS代码

html {height: 100%;}
body {  
    height: 100%;
    margin: 0;
    padding: 0;
    font: 14px/16px Helvetica;
    -webkit-text-size-adjust: none;
    background-position: center center;
    background-color: #d5d5d5;
    background-image: -webkit-gradient(radial, center center, 2, center center, 750, from(#fafafa), to(#d5d5d5));
    background-image: -moz-radial-gradient(center center 45deg, circle closest-corner, #fafafa 0%, #d5d5d5 100%);  
}
a img {border: none; }
.texture {
    background: url("../Images/texture.png") repeat scroll 0 0 transparent;
    width: 100%;
    min-height: 100% !important;
    height: 100%;
}

.splash {
    background: url(../Images/shapes1.png) no-repeat center center;
    width: 100%;
    min-height: 100% !important;
    height: 100%;
}

#eco-home-page a#logo{
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -400px;
    position: absolute;
}
#eco-home-page #start-btns {width: 610px; height: 406px; position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px;}
#eco-home-page .splash-screen a#logo {margin-top: -320px !important; }



/*for ipad*/
@media all and (max-width: 600px) {
    body {
        // extra styles for mobile
    }
}

/*for iphone/ipod*/
@media all and (min-width: 600px) {
    body {
        // extra styles for desktop
    }
}

最佳答案

在 css 中，将#start-btns 和#logo 的宽度设置为百分比。然后根据您使用的设备(即在媒体查询中)更改主体的宽度。在 iphone 的情况下，这将是 'width: 320px;'

您必须更改这些元素的定位技术，因为具有固定负边距的绝对定位将不再有效。您可以尝试放置“text-align: center;”在主体上带有“边距:0 自动；”在#start-btns 和#logo 上。

建议将大部分(如果不是全部)宽度更改为百分比(或其他一些相对度量，例如 em)。这样，您只需在媒体查询中更改正文的宽度(或字体大小)，您的布局就会自动更改。

像下面这样的东西应该可以做到。

html {height: 100%;}
body {  
    height: 100%;
    margin: 0;
    padding: 0;
    font: 14px/16px Helvetica;
    -webkit-text-size-adjust: none;
    background-position: center center;
    background-color: #d5d5d5;
    background-image: -webkit-gradient(radial, center center, 2, center center, 750, from(#fafafa), to(#d5d5d5));
    background-image: -moz-radial-gradient(center center 45deg, circle closest-corner, #fafafa 0%, #d5d5d5 100%);  
    text-align: center;
}
a img {border: none; }

.texture {
    background: url("../Images/texture.png") repeat scroll 0 0 transparent;
    width: 100%;
    min-height: 100% !important;
    height: 100%;
}

.splash {
    background: url(../Images/shapes1.png) no-repeat center center;
    width: 100%;
    min-height: 100% !important;
    height: 100%;
}

#eco-home-page a#logo img {
    margin: 6.5% auto;  
    width: 13%;
}

#eco-home-page #start-btns {
    width: 80%; 
    height: auto;  
    margin: 0 auto;
    overflow: hidden;
}

#eco-home-page #start-btns img {
    float: left;
    margin: 0.5%;
    width: 49%;
}

/*for ipad*/
@media all and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 768px;
    }
}

/*for iphone/ipod*/
@media all and (max-device-width: 480px) {
    body {
        width: 320px;
    }
}

关于javascript - Web 应用程序视口(viewport)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5247552/

25 4 0
文章推荐： jQuery 悬停向上滑动但始终显示第一个列表项
文章推荐： javascript - 二维数组填充不起作用javascript
文章推荐： ios - 使用 segue 导航到另一个 Controller
文章推荐： html - 创建一个不允许外部 CSS 影响内部元素的 div
行者123
个人简介

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

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