3

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

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>
Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Jaclyn
  • 119
  • 1
  • 8
  • Have a look at these questions: http://stackoverflow.com/questions/3597977/how-can-i-get-my-website-to-be-zoomed-out-by-default-on-mobile-phones, http://stackoverflow.com/questions/2970111/how-can-i-get-my-fixed-width-mobile-website-to-always-appear-fully-zoomed-in and http://stackoverflow.com/questions/8666543/enable-zoom-in-mobile-website. – Frank van Puffelen Nov 30 '12 at 20:22
  • Those problems are a little different from mine. The first person is having the opposite problem, and the 2nd is a different issue entirely. I did try using variations of the meta tag, but it didn't seem to make a difference. – Jaclyn Nov 30 '12 at 20:26
  • As it stands right now, someone CAN zoom in on the site, but the idea is that it should load correctly from the start for those who aren't as good with technology. – Jaclyn Nov 30 '12 at 20:28
  • 1
    In general the problem you're describing is handled by setting the correct viewport for your pages. If you post the code fragment that you tried and describe what didn't work about it, we'll be able to more accurately help. – Frank van Puffelen Nov 30 '12 at 20:30
  • Okay. I added an update with the code that I used. – Jaclyn Nov 30 '12 at 20:36
  • In principle that fragment should ensure that the mobile browser makes the viewport the same size as the device's screen. But a lot depends on how you deploy it (and potentially also on the rest of your page). Can you reconstruct a minimal reproduction of your problem, including HTML and CSS? Or does the problem only occur on your full page? – Frank van Puffelen Nov 30 '12 at 20:41
  • I included a second update with the complete code. It is a very simple site. – Jaclyn Nov 30 '12 at 20:46

3 Answers3

3

Your meta tag isn't correctly formed, it needs a / before the >:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
double-beep
  • 5,031
  • 17
  • 33
  • 41
Christine
  • 562
  • 3
  • 19
1

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

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

j6m8
  • 2,261
  • 2
  • 26
  • 34
0

Restricting to a max scale is unnecessary, unless you have a need to limit the user like that. This gets the desired results (no more tiny page content) for me:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Todd
  • 99
  • 1
  • 4