个人中心
gpt4 book ai didi

iphone - 网站在 iPhone 上看起来太小/缩小了

转载 作者：行者123 更新时间：2023-12-03 21:15:53 24 4
gpt4 key购买 nike

我现在正在开发一个网站，该网站在普通网络浏览器和旧款智能手机上看起来都很棒，但在 iPhone 上却太小了。我认为这是因为 iPhone 需要大量像素并将它们压缩到较小的屏幕上，而不是真实尺寸。有没有办法让整个网站在手机屏幕上看起来更放大/更大，而无需创建单独的移动网站？

更新:这是我尝试使用的代码。当我刷新页面时，网站看起来是一样的。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

更新#2:有人要求提供一些更完整的代码，所以我也将其包括在内:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carolina Mobility Sales Mobile</title>
<meta name="description" content="Welcome to Carolina Mobility Sales, LLC we are Carolina&#039;s largest Wheelchair Accessible Van Dealer. We have new and used accessible vans, full sized and mini vans. Some people call these vehicle Handicap or Handicapped vans, we prefer Accessible Vans. We also offer scooter and wheelchair lifts, adaptive driving controls. We also offer Wheelchair Accessible vans for Rentals. " />
<meta name="keywords" content="Wheelchair Accessible Minivans, Handicap Vans, Handicapped Vans, Full size handicap Vans, New and Used, Wheelchair Lifts, Scooter Lifts, Ramps, Driving Equipment. North Carolina, NC, South Carolina, SC, Charlotte, Columbia, Greenville, Spartanburg, Handicap Vehicle Specialists, Mobility Needs, wheelchair van, wheel chair van, accessible van, wheelchair lifts, wheelchair carriers, wheelchair ramp, Adapted van, adapted vehicle, handicap van, handicapped van, minivans, conversion minivans, disabled driving, accessible transportation, scooter lift, scooter ramp, scooter carrier, hand controls, disabled, disability, disabilities, mobility, disabled transportation, new vans, used vans, Braun, Braun low floors, tie down, remote entry, ramp, kneel suspension, fold out, in floor, power door, ezlock, EMC, NMEDA, QAP, rampvan, handicap vans, Rentals" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style type="text/css">
<!--
body {
    background-color:white;
    color:black;
    font-family: Helvetica, Arial, sans-serif;
    text-align:center;
    font-size:16px;
}
#header {
    background-image:url('images/br_grad.jpg');
    background-repeat:repeat-x;
    width:100%;
    height:303px;
}
#headerimage {
    background-image:url('images/TopImage_nograd.png');
    background-repeat:no-repeat;
    width:320px;
    height:303px;
    margin-right:auto;
    margin-left:auto;
}
#facebook {
    background-color:#b3d6e6;
    border: solid 2px #0078ae;
    position:relative;
    top:115px;
    z-index:99;
    padding:4px;
    width:320px;
}
#facebook a {
    text-decoration:none;
    font-weight:bold;
    color:#0078ae;
    justify:center;
    font-size:15px;
}
#navigation {
    background-color:#b3d6e6;
    border: solid 2px #0078ae;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding:10px;
    width:97%;
    margin-right:auto;
    margin-left:auto;
}
.button {
    -moz-border-radius: 15px;
    border-radius: 15px;
    height:20px;
    margin-bottom:10px;
     /* fallback */ 
    background-color: #2f2f30; 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444445), to(#181819)); 
    /* Safari 5.1, Chrome 10+ */ 
    background: -webkit-linear-gradient(top, #444445, #181819); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top, #444445, #181819);
     /* IE 10 */ 
    background: -ms-linear-gradient(top, #444445, #181819); 
    /* Opera 11.10+ */
     background: -o-linear-gradient(top, #444445, #181819);
    padding-top:5px;
}
.button a {
    text-decoration:none;
    color:white;
    font-weight:100;
    display:inline-block;
    position:relative;
}
.button .star {
    position:relative;
    left:8px;
    bottom:2px;
    width:5px;
    float:left;
}
.button .arrow {
    position:relative;
    right:3px;
    float:right;
    bottom:3px;
}
#locations {
    margin-right:auto;
    margin-left:auto:
}
#locations img {
    margin-top:7px;
    margin-right:2px;
}




-->
</style>
<script type="text/javascript">
  function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
  </script>

</head> 

<body> 

<div id="wrapper">

<div id="header">

    <div id="headerimage">

        <div id="facebook">
        <a href="facebooklinks.html">Click to "Like" Us on Facebook!</a>
        </div>  

    </div>

</div>

<img src="images/bubble.png" alt="Carolina Mobility Mobile" />

<div id="navigation">

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="inventory.html">Inventory</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="locations.html">Locations</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="contact.html">Contact Us</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="about.html">About Us</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="videos.html">Videos</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="reasons.html">Top 10 Reasons</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div class="button">
    <div class="star"><img src="images/star.png" alt="star" /></div>
    <a href="http://www.cmobilitysales.com">Full Website</a>
    <div class="arrow"><img src="images/arrow_rt.png" alt="arrow_rt" /></div>
    </div>

    <div id="locations">

    <a href="callto:8005968266"><img src="images/charlotte.png" alt="charlotte" /></a>
    <a href="callto:8668265438"><img src="images/columbia.png" alt="columbia" /></a><br />
    <a href="callto:8888865438"><img src="images/greenville.png" alt="greenville" /></a>
    <a href="callto:8777855438"><img src="images/savannah.png" alt="savannah" /></a>

    </div>

</div>


</div>


</body></html>

最佳答案

您的 meta 标记格式不正确，在 > 之前需要有一个 / :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" <strong>/</strong>>

关于iphone - 网站在 iPhone 上看起来太小/缩小了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13652362/

24 4 0
文章推荐： iphone - cocos2d 和 box2d : camera rotation
文章推荐： Backbone.js - 将 2 个模型传递给 1 个 View
文章推荐： batch-file - 如何在批处理脚本中连接两个变量？
文章推荐： iphone - 调整 UIView 的大小而不使用动画
行者123
个人简介

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

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