我已经创建了一个网站的移动版本-简单的表格HTML和稀缺的CSS。在iOS和Android中渲染效果很好,我甚至使用了一个Meta-Width设置来获取设备的宽度。所以,它甚至使黑浆果的宽度-
但是,我遇到了一个巨大的问题——这个网站,由于一些奇怪的原因,在黑莓上——在访问链接或阅读文本之前需要缩放(虽然不需要)。我知道黑莓res大约是480px-和iOS 900,对吧?有什么建议可以让宽度保持在iOS、Android和黑莓手机之间,同时不强迫用户在黑莓手机上缩放(使用放大的缩放图标)?这是一个Javascript的东西,一个(希望不是)PHP/服务器端的东西吗?
最后,我该如何创建一个移动版本的网站-在iOS、Android和BB中都能很好地保持渲染效果,而不需要让用户“缩放>点击>内容”,只需正常浏览,“点击>内容”。但也不需要我缩小它在iOS/Android中的显示大小?
这个网站的设置方式是最终的目标;http://lisaunger.mobi/它呈现在任何地方,就像我试图呈现我的一样-但不确定如何呈现。
请给我一些建议,因为我明天要测试它们。
黑莓is:Curve 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;
}
更新:将站点的宽度设置为320px,并添加meta-initial scale可以让缩放功能消失,并以黑莓应有的方式呈现——但最终会从iOS和Android中获得一点效果——因为现在站点的缩放功能超过了那些设备的浏览器宽度,导致了一点水平滚动——太近了!
最佳答案
你试过用设备来定义网站吗-如果我用我的bb上网的话,它会更小,这样用户就不需要缩放了
this可能会有帮助