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

【问题标题】：Website looks too small/zoomed out on iPhone网站在 iPhone 上看起来太小/缩小了
【发布时间】：2012-11-30 20:05:43
【问题描述】：

我现在正在开发一个网站，它在普通网络浏览器和旧智能手机上看起来很棒，但在 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>

【问题讨论】：

  • 看看这些问题：stackoverflow.com/questions/3597977/…、stackoverflow.com/questions/2970111/… 和 stackoverflow.com/questions/8666543/…。
  • 这些问题和我的有点不同。第一个人遇到了相反的问题，而第二个人则完全是另一个问题。我确实尝试过使用元标记的变体，但似乎没有什么不同。
  • 就目前而言，有人可以放大该网站，但其想法是，对于那些不擅长技术的人来说，它应该从一开始就正确加载。
  • 一般来说，您所描述的问题是通过为您的页面设置正确的视口来处理的。如果您发布您尝试过的代码片段并描述其中的哪些问题，我们将能够更准确地提供帮助。
  • 好的。我使用我使用的代码添加了更新。

标签： iphone pixel


【解决方案1】：

从 body CSS 中删除 font-size。此静态数字可防止文本大小调整为大于 16（非常小）像素。

此外，若要启用缩放，请同时删除 maximum-scale=1。

【讨论】：

    猜你喜欢
    • 2018-05-26
    • 2014-08-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-20
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode