webapp中判断屏幕旋转

来源：http://caibaojian.com/644.html

<script type="text/javascript">
        // 判断屏幕是否旋转
        function orientationChange() {
            switch(window.orientation) {
                case 0:
                    alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case -90:
                    alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case 90:
                    alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case 180:
                alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
                break;
            }
        }
        
        // 添加事件监听
        window.addEventListener('load', function(){
            orientationChange();
            window.onorientationchange = orientationChange;
        });
    </script>

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

6. 缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){img{max-width:100%;height:auto;}}

7. 模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

移动设备的尺寸

ipod touch 4/iphone4/iphone4s

竖屏
width/height 320/356
横屏
width/height 480/208

iphone5

竖屏
width/height 320/444
横屏
width/height 568/208

ipad mini

竖屏
width/height 768/928
横屏
width/height 1024/672

New Pad

竖屏
width/height 768/928
横屏
width/height 1024/672