Я создал мобильную версию веб-сайта - простая таблица 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 - так как теперь сайт увеличивает масштаб браузера, пропуская ширину браузера на этих устройствах, вызывая немного горизонтальныйсвиток - так близко!