依據行動裝置顯示對應網頁效果

隨著越來越多人使用 iPad iPhone 或者 Android 手機與平板電腦上網

各大網站設計與知名企業網站也紛紛提供專屬行動裝置網頁

其實

透過最新的智慧型手機或平板電腦的瀏覽器,依樣可以正常瀏覽各大網站

,但是與一班電腦螢幕相比,由於手機與平板的螢幕尺寸與解析度都有不小差距

使用者常常需要使用手指重複不斷縮放瀏覽網頁內容

這對於使用者來說實在很不方便

能夠讓網頁依據使用者裝置顯示不同的版面效果

snap019  


許多書籍都介紹使用 CSS+DIV 所喔這裡我就不加介紹

現在 提供一個 比較簡單的方式來製作~~~

使用 JAVASCRIPT語言 來偵測電腦螢幕解析度,導向對應的網頁版版本

例如:手機使用者進入雞蛋貓部落格後,會自動導向 手機板的雞蛋貓部落格網址。

只要將此語法 貼入到 網頁程式碼<head></head>標籤內即可

<script type="text/javascript">
<!--
function mymedia(){
var myscreen=screen.availWidth;
if(myscreen<321){document.location.href="手機網頁";return;}

if(myscreen<769){document.location.href="平板網頁";return;}

}
mymedia();//呼叫執行自訂函數
//-->
</script>

 

 

    全站熱搜

    雞蛋貓異想世界 發表在 痞客邦 留言(2) 人氣()