screen rotated on mobile and change background image

手機網頁，跨裝置的網頁，可以找一些 cross device 的 css framework...
搭配方塊排版的設計，就可以得到相當不錯的結果～

我覺得手機網頁最大的重點就是，好好的設定meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
如果在意某些瀏覽器放大縮小會讓版面爛掉的話，就加上 user-scalable=0...
然後自己做個字型放大功能一.一b...

另外就手機有直式跟橫式的差別～～
（PC基本上都是橫式）
若背景是張圖片的話，然後....想要像APP那樣子，做個比較漂亮的轉換的話～
當然首先要有兩張圖～
ex: background_h.jpg（橫）, background_v.jpg（直）

然後在 window.onresize (螢幕大小切換)
但～～直接改寫  window event 是件很可怕的事情～所以要用 event addEventListener 的方式實作較好～
參考網路上的資源修改成

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
        if (object.addEventListener) {
            object.addEventListener(type, callback, false);
        } else if (object.attachEvent) {
            object.attachEvent("on" + type, callback);
        } else {
            object["on"+type] = callback;
        }
    };
   
    addEvent(window, "resize", function(event) {
        //check screen width and height
        var oh = $(window).height();
        var ow = $(window).width();
        var sz = 'h';
        if(oh > ow)  {
            sz = 'v';
        }         
  
            $('.content').css('background', 'url(imgs/background_'+sz+'.jpg) no-repeat');
            $('.content').css('background-position', 'center center');
            $('.content').css('background-size', 'cover');
       
    });


如果想要在轉換時，做個過場動畫...
可以用jquery 的 animate，但...因為圖是現load的，
在網路不穩的手機上～其實蠻讓人困擾的就是...

想想最簡單的方式，應該就是做一張大張的圖，直接符合橫，寬的版...
然後背景圖定位放在中間～
（缺點就是那張圖會很大張！還有一些美感的問題就是...）