2011年6月13日 星期一

手機網頁,判斷橫看或是直看

手機可以用直著看,也可以轉橫著看
但如果手機頁面沒做相對應的處理,一轉換方向頁面就會破掉
以下的code為判斷手機翻轉時,對頁面做處理的範例
以iphone為例實作範例教學:

<!-- 在 body 裡加上 onorientationchange -->
<body onorientationchange="changePosition();">
<img id="bg_img" src="img/test.png">
<script>
//圖的長寬
var img_width = 320;
var img_height = 416;
var ppm;
function changePosition(){
    //每次翻轉就重新把圖長寬設定一次
    ppm = window.innerWidth/img_width;
    document.getElementById('bg_img').style.width = window.innerWidth;
    document.getElementById('bg_img').style.height = img_height*ppm;
    //把網址列藏起來
    setTimeout('window.scrollTo(0,1);', 5);
}
changePosition();

</body>

沒有留言:

張貼留言