网站在iPhone上看起来太小/缩小 [英] Website looks too small/zoomed out on iPhone

查看：94
本文介绍了网站在iPhone上看起来太小/缩小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在正在一个网站上工作，该网站在普通的网络浏览器和较旧的智能手机上看起来都不错，但在iPhone上却太小了.我认为这是因为iPhone需要大量像素并将其压缩到较小的屏幕上，而不是像实际尺寸那样.有没有一种方法可以使整个网站在电话屏幕上看起来更放大/更大，而无需创建单独的移动网站?

I am working on a website right now that looks great in a normal web browser and on the older smart phones, but it is way too small on the iPhone. I think this is because the iPhone takes a large number of pixels and squeezes them on to a smaller screen rather than being true-to-size. Is there a way to make the entire site look more zoomed-in / large on the phone screen without having the create a separate mobile site?

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

UPDATE: This is the code I tried using. The website looked the same when I refreshed the page.

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

更新2:有人要求提供更完整的代码，因此我也将其包括在内:

UPDATE #2: Someone asked for some more complete code, so I am including that as well:

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

推荐答案

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

Remove the font-size from your body CSS. This static number prevents the text from resizing to be larger than 16 (very small) pixels.

此外，要启用缩放功能，请同时删除maximum-scale=1.

Also, to enable zooming, remove maximum-scale=1 as well.

这篇关于网站在iPhone上看起来太小/缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆