Mee's Notes: 瀏覽器網頁設計

顯示具有 瀏覽器網頁設計 標籤的文章。顯示所有文章

星期三, 8月 28, 2013

超簡短的行動裝置瀏覽器 JavaScript 偵測技巧

剛剛看到 stackoverflow 上一篇超讚的回覆, 使用以下的技巧偵測是否行動裝置的瀏覽器：

if(typeof window.orientation !== 'undefined'){...}

由於一般來說, PC 上的瀏覽器都沒有提供 window.orientation 屬性, 因此可以用來快速判別是否為行動裝置的瀏覽器。

當然, 隨著往後 PC 與平版、手機界線的混淆, 也許這個方法會失效, 不過目前應該還堪用, 先學起來！

星期六, 8月 24, 2013

同事開出了一個需求, 希望專為手機製作的網頁若是在桌機上的瀏覽器觀看時, 能夠自動縮小尺寸,不然以現在手機至少 800X400 點數以上的設計, 在手機上看起來大小適中的圖片, 到了桌機上的瀏覽器都會過大。

為了解決這個問題, 第一步是先能判別是手機還是桌機, 這在 detect mobile browser 網站已經提供有現成的 JavaScript 碼可用。接著就是希望能夠縮放網頁內容, 查了各種解法, 看起來要想透過 JavaScript 直接控制瀏覽器的縮放比例是不可行的, 只能透過 CSS 直接縮放網頁內容, 根據 stackoverflow 上這篇問答, 根據瀏覽器的種類, 可分別處理：

Firefox 提供有 MozTransform 屬性可以用 scale(1.0) 的格式設定元素的縮放比例, 1,0 就是原尺寸不縮放。
Chrome 或是 IE 則可用 zoom 屬性, 以 100% 的格式設定縮放比例。

只要將上述屬性套用在body 元素的 CSS 上, 就可以將整個網頁內容縮放成指定的比例。

不過對於 Firefox, 縮放後網頁的上下左右都會留下大塊的空白區域, 使得縮放後的內容不識顯示在瀏覽器的中央上方處, 要解決這個問題, 必須再使用 MozTransformOrigin 屬性設定為 "center top" 才行。

利用上述方式寫成的 JavaScript 碼如下：

window.onload = function(){
    var a = navigator.userAgent||navigator.vendor||window.opera;
    var level = 60;
    if (!(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))) {
     if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox)
         document.body.style.MozTransform = "scale(" + level/100 + ")";
         document.body.style.MozTransformOrigin = "center top";
     }
     else {
      document.body.style.zoom = "" + level + "%";
      document.body.style.msTransformOrigin = "center top";
     }
 }   
};

這個解法在 IE 上也有和 Firefox 類似的問題, 就是網頁內容會偏向瀏覽器視窗的左邊, 而不是在中間上方, 目前還沒有找到解決的方法, 很可惜。

星期日, 3月 24, 2013

JavaScript 的 var

今天有同事問我 JavaScript 變數有加 var 宣告跟沒有有什麼差？我聽了也是一愣, 後來去查了文件才發現, 原來 var 不 var 可有差了, 主要大概可以歸納為這兩點：

JavaScript 是以 function 來建立新的變數 scope, 只要是在 function 之外宣告的變數都是全域變數, 也就是全域物件的屬性, 而只有全域變數可以不用加 var 宣告, 就可以直接使用。
有加 var 宣告的全域變數是全域物件 (在瀏覽器中就是 window) 的 non-configurable 屬性, 比如說你就無法使用 delete 刪除以 var 宣告的全域變數。

舉例來說, 以這個 html 檔為例：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div id="da"></div>
  <div id="db"></div>
  <div id="dc"></div>
  <div id="dd"></div>
<script>
i = 10;
var j = 20; 
this.i = 100;
this.j = 200;

$("#da").text(i);
$("#db").text(j);
$("#dc").text(this.i);
$("#dd").text(window.j);
</script>
 
</body>
</html>

實際輸出的結果就是：

100
200
100
200

你可以看到不論是用 i 或是 this.i 都是同一份資料, 這是因為 this 指向全域物件, 所以也可以用 window.j 以存取 j, 因為在瀏覽器中, window 就是全域物件。

如果你在剛剛的 JavaScript 程式中插入兩航程式, 嘗試用 delete 刪除 i 與 j：

i = 10;
var j = 20; 
this.i = 100;
this.j = 200;

delete this.i;
delete this.j;

$("#da").text(i);
$("#db").text(j);
$("#dc").text(this.i);
$("#dd").text(window.j);

在瀏覽器的 JavaScript console 中就會看到以下的錯誤訊息：

Uncaught ReferenceError: i is not defined

這是因為 i 並沒有使用 var 宣告, 是全域物件的 configurable 屬性, 因此可以用 delete 刪除, 所以當執行到底下存取變數 i 的值時, i 變數就已經不存在了。

事情還沒完, 如果你是使用 node.js, 那麼又複雜了一點, 使用 var 宣告的全域變數實際上不是真的全域, 而只能在模組 (可簡單看成是檔案) 內存取, 出了模組, 就無法存取了。以底下的程式為例：

i = 10;
var j =20;

console.log(global.i);
console.log(global.j);
console.log(i);
console.log(j);

執行結果如下：

10
undefined
10
20

透過 node.js 的全域物件 global 可存取到沒有使用 var 宣告的 i 變數, 這是真正全域的變數。可是透過 global 物件嘗試存取 j 變數時, 就會看到 global.j 是未定義的屬性, 這表示 j 並不是真正全域的變數。

如果另外寫個程式把剛剛的測試程式當成模組載入：

var tv = require("./testvar.js");

console.log("global==============");
console.log(i);
//console.log(j);

輸出結果如下：

10
undefined
10
20
global==============
10

可以看到在程式中可存取到在另一個檔案中宣告的變數 i, 的確是全域變數無誤。若是把程式中最後一行的註解拿掉, 嘗試存取 j, 就會看到：

10

D:\mee\My Box Files\practice\jswebapp\testvar2.js:5
console.log(j);
^
ReferenceError: j is not defined
at Object. (D:\mee\My Box Files\practice\jswebapp\testvar2.js:5:13)

可以看到 j 並未定義, 這是因為 j 是用 var 在其他檔案中宣告的變數, 不是全域變數, 所以無法存取。

星期三, 11月 30, 2011

免費的 JavaScript 檔案存放空間：Free Javascript Hosting

因為想把 JavaScript library 放在網路上, 以便能在 blogger 的網誌上使用, 順手找了一下, 果然有免費的 JavaScript 檔案存放空間, 而且上載程序超簡單, 只要填入 email 就可以上載, 之後就可以在任一網頁中引用了, 真不賴！

Free Javascript Hosting

星期六, 5月 07, 2011

Firefox 中觀看 Windows Media File 的方法

之前找到相關的資料後, 雖然 PO 在 Facebook 上, 不過 Facebook 我實在不知道該怎麼找資料, 還是再 PO 一次在部落格上比較妥當, 基本上就是依據以下這篇文章下載三個 DLL 複製到 Firefox 的 Plugins 資料夾下：

Manually Installing Windows Media Player Plugin for Firefox in Windows Vista

希望文章中 DLL 的下載連結不會失效！

星期三, 9月 16, 2009

網頁設計實戰課程：不注重網頁相容性就是會有這樣的後果！

之前編輯了一些CSS的書，這種書有個特色，就是一定會大談網頁相容性的問題，不過其中很少點出不注重網頁相容性的嚴重性，前幾天剛好在不來恩的噗文上看到以Pizza關鍵字查詢時，因為必勝客的網站只能讓IE看，所以必勝客雖然佔到了第一位，但卻出現這樣的畫面：

除非看網址，否則大概不會發現那是必勝客，這其實是網頁設計者貼心但卻粗心的結果所造成的，原本網頁設計者想的是對於Windows的Firefox使用者，可以建議他們安裝IE Tab這個外掛，就可以切到IE引擎瀏覽內容，但是沒想到這樣一來，因為搜尋引擎的機器人也被視為非IE瀏覽器，所以看到的搜尋結果就是一堆和必勝客無關的文字。如果你進到必勝客，就可以知道原來他是這樣的：

我其實建議就算沒有功夫或預算改成可以讓不同瀏覽器看到相同的畫面，至少也用一些文字訊息宣傳一下特惠活動之類，並且要注意讓網頁的標題（也就是顯示在瀏覽器標題列的文字）一定要出現公司名稱等關鍵字，而網頁中則在特惠或是公司行銷訊息之後才出現貼心的IE Tab外掛安裝建議，這樣搜尋到網站時瀏覽者才能辨識網站名稱，同時連過去之後也不會完全放棄就跳離！

訂閱：文章 (Atom)

Mee's Notes

highlight.js