title: Optimizing a Site for Blackberry Curve (Maintaining same in iOS/Android)
body: <p>I've created a mobile version of a website - simple Table HTML and scarce CSS. Renders great in iOS and Android, I've even used a Meta Width Set to take the width across devices. So, it even renders great in Black Berry width wise- </p>
  
  <p>But, I came across a huge problem - <strong>The site, for some odd reason on Blackberry - requires a Zoom (Though not needed) before being able to access a link or read the text</strong>. I understand Blackberry res is about 480px - and iOS 900 something, right? Any suggestions on keeping the width to take across iOS, Android, and Blackberry - while not forcing the user to Zoom (With that Magnifying Zoom Icon) on Blackberry? Is this a Javascript thing, a (Hopefully not) PHP/Server side thing?</p>
  
  <p><strong>Ultimately, how do I create a Mobile version of a site - that maintains rendering well in iOS, Android, but also in BB without making the user 'Zoom > Click > Content' but just to browse it normally, 'Click > Content'. But also doesn't require me reducing the size it'll display in iOS/Android?</strong></p>
  
  <p>The way this website is setup is the ultimate goal; <a href="http://lisaunger.mobi/" rel="nofollow">http://lisaunger.mobi/</a> It renders everywhere and exactly like I'm trying to render mine - not sure how, though.</p>
  
  <p>Please throw me any suggestions as I'll be testing them all tomorrow.  </p>
  
  <p><strong>Blackberry is: Curve 8520 v4.6.1.259 2009</strong></p>
  
  <p>Here's the code I have at the moment:</p>
  
  <p><em>Markup:</em></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
  "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
      &lt;head&gt;
  
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
  
  &lt;meta name="HandheldFriendly" content="true"&gt;  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
  
  
  &lt;link rel="stylesheet" media="all" href="mobilesub.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div style="width: 480px;margin: auto;"&gt;
  &lt;div&gt;
  
    &lt;a href="index.html"&gt;&lt;img src="img/logo.png" border="0"/&gt;&lt;/a&gt;
    &lt;br /&gt;
  
  &lt;/div&gt;
  
  
      &lt;div&gt;
  
      &lt;a href="books.html"&gt;&lt;img src="mobile buttons/books_off.png"   border=0  /&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;div&gt;
  
  
       &lt;a href="news.html"&gt;&lt;img src="mobile buttons/news_off.png"  border=0  /&gt;&lt;/a&gt;
  
       &lt;/div&gt;
  
       &lt;div&gt;
  
       &lt;a href="app.html"&gt;&lt;img src="mobile buttons/app_off.png"  border=0 /&gt;&lt;/a&gt;
  
       &lt;/div&gt;
  
       &lt;div&gt;
  
        &lt;a href="about.html"&gt;&lt;img src="mobile buttons/about_off.png"  border=0  /&gt;&lt;/a&gt;
  
       &lt;/div&gt;
  
       &lt;div&gt;
  
       &lt;a href="videos.html"&gt;&lt;img src="mobile buttons/videos_off.png" border=0  /&gt;&lt;/a&gt;
  
       &lt;/div&gt;
  
       &lt;div&gt;
  
  
      About
  
   &lt;br /&gt;  
  
  The New York Times bestseller
  
  Contact
  
  
  
  
  &lt;/div&gt;
  
       &lt;div&gt;
       &lt;/div&gt;
       &lt;/div&gt;
  
  &lt;/body&gt;
  
  
   &lt;script type="text/javascript" src="http://m.link.me/tracker.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  
  &lt;script type="application/x-javascript"&gt;
      if (navigator.userAgent.indexOf('iPhone') != -1) {
  addEventListener("load", function() {
  setTimeout(hideURLbar, 0);
      }, false);
      }
  
      function hideURLbar() {
  window.scrollTo(0, 1);
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>body {
  
  padding: 0px;
  margin: 0px;    
  background-color:#000;
  width: 100%;
  text-align: center; 
  color: #fff;
  
  }
  
  .center-display {
      margin-left: auto;
      margin-right: auto;
  }
  
  #content {
  
  }
  
  
  #h6 {
  
  font-size: 26px;
  
  }
  
  div {
  
      margin: 0px;
      padding: 0px;
  }
  </code></pre>
  
  <p><strong>Update:</strong> <em>Setting the site to 320px in width, and adding the meta-initial scale allows the zoom to go away and renders the way it should in Blackberry - but ends up taking a way from iOS and Android a little - as now the site zooms passed the browser width in those devices causing a little bit of a horizontal scroll - so close!</em></p>