Phi*_*son 4 jquery coding-style landscape portrait jquery-mobile
我已经开始使用jquery移动框架但我似乎无法使用横向和纵向类来缩小样式.
文件说
HTML元素将始终具有"纵向"或"横向"类,具体取决于浏览器或设备的方向.
所以我的印象是,<h1>foo</h1>要么是<h1 class="landscape">foo</h1>或<h1 class="portrait">foo</h1>
但h1.landscape { font-size:16px; }并h1.portrait { font-size:9px; }似乎不工作.
如果有人能够对此有所启发,我将不胜感激.
好.我决定看看最新情况,并使用curl通过android视图获取源代码.
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);
echo $html;
具有横向或纵向类的唯一元素是html标记.
<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>
我也注意到框架不会在旋转时自动切换类,所以下面的代码我测试过.
<script type="text/javascript">
$(window).resize( function(){
$('html').toggleClass('landscape, portrait');
});
</script>
废弃上面有缺陷的.
<script type="text/javascript">
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
</script>
使用Tommi Laukkanen的剧本中的liitle,上面的工作正常.
小智 5
对不起,但那已经过时了!从HTML5到CSS3 MediaQueries.现在您可以决定CSS中的样式:
@media screen and (orientation: landscape) {
h1 {
color: red;
}
#someId {
width: 50%;
}
}
@media screen and (orientation: portrait) {
h1 {
color: blue
}
#someId {
width: 100%;
}
}