Оптимизация сайта для Blackberry Curve (поддержание того же в iOS / Android) - PullRequest
3 голосов
/ 05 октября 2011

Я создал мобильную версию веб-сайта - простая таблица HTML и скудный CSS.Прекрасно рендерится в iOS и Android, я даже использовал Meta Width Set для определения ширины на разных устройствах.Таким образом, он даже отлично отображает ширину Black Berry -

Но я столкнулся с огромной проблемой - Сайт, по какой-то странной причине на Blackberry, требует Zoom (хотя и не нужен), прежде чемвозможность получить доступ к ссылке или прочитать текст .Я понимаю, что Blackberry Res составляет около 480 пикселей - и iOS 900 что-то, верно?Какие-нибудь предложения по сохранению ширины для iOS, Android и Blackberry - не принуждая пользователя к Zoom (с этим значком Magnifying Zoom) на Blackberry?Является ли это Javascript-компонентом (надеюсь, что нет) на стороне PHP / сервера?

В конечном счете, как мне создать мобильную версию сайта - которая хорошо поддерживает рендеринг в iOS, Android, но такжев BB, не делая пользователя «Zoom> Click> Content», но просто чтобы просмотреть его в обычном режиме, «Click> Content».Но также не требует, чтобы я уменьшал размер, который будет отображаться в iOS / Android?

Конечная цель этого веб-сайта - настройка;http://lisaunger.mobi/ Он рендерится повсюду и точно так же, как я пытаюсь сделать мой - хотя я не уверен, каким образом.

Пожалуйста, выскажите мне любые предложения, так как завтра я опробую их все.

Blackberry: кривая 8520 v4.6.1.259 2009

Вот код, который у меня есть на данный момент:

Разметка:

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

<meta name="HandheldFriendly" content="true">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">



<link rel="stylesheet" media="all" href="mobilesub.css" />

</head>

<body>

<div style="width: 480px;margin: auto;">
<div>

  <a href="index.html"><img src="img/logo.png" border="0"/></a>
  <br />

</div>


    <div>

    <a href="books.html"><img src="mobile buttons/books_off.png"   border=0  /></a>

    </div>

    <div>


     <a href="news.html"><img src="mobile buttons/news_off.png"  border=0  /></a>

     </div>

     <div>

     <a href="app.html"><img src="mobile buttons/app_off.png"  border=0 /></a>

     </div>

     <div>

      <a href="about.html"><img src="mobile buttons/about_off.png"  border=0  /></a>

     </div>

     <div>

     <a href="videos.html"><img src="mobile buttons/videos_off.png" border=0  /></a>

     </div>

     <div>


    About

 <br />  

The New York Times bestseller

Contact




</div>

     <div>
     </div>
     </div>

</body>


 <script type="text/javascript" src="http://m.link.me/tracker.js"></script>
</html>

<script type="application/x-javascript">
    if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
    }, false);
    }

    function hideURLbar() {
window.scrollTo(0, 1);
    }

</script>

CSS

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;
}

Обновление: Установка ширины сайта 320 пикселей и добавление мета- начальный масштаб позволяет убрать масштабирование и отображает так, как должно быть в Blackberry - но в конечном итоге немного уступает iOS и Android - так как теперь сайт увеличивает масштаб браузера, пропуская ширину браузера на этих устройствах, вызывая немного горизонтальныйсвиток - так близко!

1 Ответ

0 голосов
/ 05 октября 2011

Вы пытались определить веб-сайт по устройствам - поэтому, если я зайду в Интернет с моим bb, в этом случае он будет меньше, поэтому пользователю не нужно будет делать увеличение , это может помочь

...