Website sieht zu klein/Auszoomen auf iPhone

Ich bin an einer website arbeiten, gerade jetzt, das sieht toll aus in einem normalen web-browser und auf älteren smart-phones, aber es ist viel zu klein auf dem iPhone. Ich denke, das ist, weil das iPhone nimmt eine große Anzahl von Pixeln und presst Sie auf einem kleineren Bildschirm eher, als dass Sie true-to-Größe. Gibt es eine Möglichkeit, um die gesamte Website Aussehen Zoom-in /großen auf dem Handy-Bildschirm, ohne dass die erstellen Sie eine separate mobile Website?

UPDATE: Dies ist der code, den ich versucht, mit. Die website sah das gleiche, wenn ich aktualisiert die Seite.

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

UPDATE #2: Jemand bat um etwas mehr kompletten code, also ich bin auch, wie gut:

<!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>
Haben Sie einen Blick auf diese Fragen: stackoverflow.com/questions/3597977/..., stackoverflow.com/questions/2970111/... und stackoverflow.com/questions/8666543/....
Diese Probleme sind ein wenig anders als bei mir. Die erste person ist, die entgegengesetzte problem, und die 2. ist ein anderes Thema ganz. Ich habe versuche mit Variationen der meta-tag, aber es schien nicht zu einen Unterschied machen.
Wie es jetzt steht, KANN mir jemand zoom-in auf der Website, aber die Idee ist, dass es laden soll von Anfang an richtig für diejenigen, die nicht so gut mit der Technik.
Im Allgemeinen sind die problem die du beschreibst erfolgt durch Einstellung der richtigen viewport für Ihre Seiten. Wenn Sie nach dem code-fragment, dass Sie versucht haben, und beschreiben, was nicht funktioniert hat es, wir werden in der Lage sein, um genauer zu helfen.
Okay. Ich fügte hinzu, ein update mit dem code, den ich verwendet.

InformationsquelleAutor Jaclyn | 2012-11-30

  1. 1

    Entfernen Sie die font-size von Ihrem body CSS. Diese statische Zahl verhindert, dass der text aus der Größenänderung werden, die größer als 16 (sehr klein) Pixel.

    Auch, zu aktivieren, Zoomen, entfernen maximum-scale=1 als gut.

    InformationsquelleAutor j6m8

Schreibe einen Kommentar