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的，
在網路不穩的手機上～其實蠻讓人困擾的就是...

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

centos apache httpd gzip

最近在寫js～然後就發現開始越寫越肥～
js 做成 min...省一點～
如果是有要用到字型檔的，就不知道該怎麼好orz...
（中文的字型檔爆肥T^T）

看了很久～好像也沒什麼比較好的方式～
就試用一下 gzip， 來結省傳輸的空間～
（頻寬＝$$...T_T）

gzip 要看有支援的瀏覽器～
http://schroepl.net/projekte/mod_gzip/browser.htm
原理大概就是 web server 丟個有壓縮過的 給 browser client...
然後browser client 再解壓～

現在的 browser 都比較先進了，主要就是看server有沒有開啟囉～
找了幾篇文章～覺得這個寫得比較好～就用他的方法～
https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-mod_deflate-on-centos-7

先check 有沒有裝模組～
apachectl -t -D DUMP_MODULES |grep deflate

現在的版本預設應該都是有的～
再把設定檔寫進去～
vim /etc/httpd/conf.d/mod_deflate.conf
<filesMatch "\.(js|html|css)$">
    SetOutputFilter DEFLATE
</filesMatch>
DeflateCompressionLevel 1

重起httpd
service httpd restart

接著就可以測試～～
wget --header="Accept-Encoding: gzip" http://<your_server_ip>/jquery-1.11.3.js

看他下下來的檔案大小就可以知道真的有變小QQ~

或者開firebug/chrome 開發者工具的 網路 應該也可以發現檔案變小囉～～

prevent scroll by keydown arrow down...and div focus

補個最近的筆記～
其原由是想替 div加一些hot key 來做事情...

一般的純 div 預設是沒有 focus 的功用～
就算你直接寫 $('#aaa').focus() ，他還是不理你～

重點是要先加個屬性～tabIndex=0
可以參照這裡的說明～蠻詳細的～
https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

< 0  為不能被 focus/tab，就沒辦法被focus（就普通div預設並沒有設定）
 >0 設定tab 的順序，文中是不建議使用，是怕亂跳亂掉吧～
=0 大部份的input, button 預設都有～

------------------------------------------------------------------------
另外，想取到目前被 focus 的元件～可以使用傳統 js 取得就好～
document.activeElement
方便又好用～

要另外設定 focus 的 css，要:focus 和:active 雙管其下～比較不會有問題～
（聽說chrome 好像吃  active 不吃 focus，沒特別試就是）
.mycss:focus, .mycss:active {
    border: solid 1px blue;
}

------------------------------------------------------------------------
在一般的行為下，按箭頭的上/下是會捲動整個頁面的scroll bar...
就跟page up/down一樣～

不過有時後～需要在對特定的元件按 上下左右 鍵時～
會連動到畫面的scroll bar～就～一整個很乾尬XD...
所以就變成重點在～ 需要各自有 上下左右 的元件的 keydown listener 下手～
document.xxxxxx.onkeydown =
function(event)  {
       var keycode = event.keyCode;
       ..............
       event.preventDefault();
       return false;
};

總之，重點是在
1. 要使用 onkeydown listener (因為這是第一個觸發的，如果用 keyup就來不及了)
2.  event.preventDefault(); 和 return false; 防止其他瀏覽器接下去的行為～

大概就是降子～