作者wujr (wujr)
看板Web_Design
標題Re: [情報] 多重解析度的網頁設計(響應式設計)
時間Tue Apr 23 12:56:04 2013
※ 引述《dementia (妖精尾巴魔導士)》之銘言：
: 常看到有人發問相關的問題
: 就貼上來了
: 雖然是英文網頁
: 但是有圖 字也沒有很多 英文不會很難
: 給有興趣的人參考一下囉
: 希望沒有op
: 網頁連結：
: 10 basic tips about responsive design
: http://www.pinfographics.org/ig/10-basic-tips-about-responsive-design/
小弟最近無聊的實驗，雖然跟上面的主題概念不太一樣。
我想要達成的效果是當我在最佳解析度設計好網頁後，
在不同的瀏覽器，不同使用者的解析度，都能呈現一樣的效果，
因此想到的是等比例放大的方式，跟用瀏覽器的縮放功能一樣，
只不過是用javascript動態寫入css來達成，使用者不需自己調，
一開啟就是最適合的大小。
<!--選擇解析度-->
<script type="text/javascript">
var objWidth=1024+15; //修改1024這個值，以符合你想要的最佳寬度
var objHeight=700+15; //修改700這個值，以符合你想要的最佳高度
var scaleRate=1;
var shift="auto";
if(document.documentElement.clientWidth > objWidth &&
document.documentElement.clientHeight > objHeight){
scaleRate=Math.round(Math.min(document.documentElement.clientWidth/objWidth,
document.documentElement.clientHeight/objHeight)*100)/100;
}
if(document.documentElement.clientWidth <= objWidth){
shift =
Math.round(((document.documentElement.clientWidth-16)-(objWidth-15)*scaleRate)/2)
+ "px";
}
var isSafari = navigator.userAgent.search("Safari") > -1;//Google瀏覽器是用這
核心
var isIE6 = navigator.userAgent.search("MSIE 6") > -1;
var isIE7 = navigator.userAgent.search("MSIE 7") > -1;
var isIE8 = navigator.userAgent.search("MSIE 8") > -1;
if (isSafari) {
document.getElementById('all').style.zoom = scaleRate;
document.getElementById('all').style.marginLeft = shift;
document.getElementById('all').style.marginRight = shift;
}else if (isIE6 || isIE7 || isIE8) {
document.body.style.zoom = scaleRate;
shift =
Math.round((document.documentElement.clientWidth-(objWidth-15)*scaleRate)/2)
+ "px";
document.body.style.marginLeft = shift;
}else {
//document.getElementById('all').style.transform = 'scale(' + scaleRate +
')';
document.getElementById('all').style.MozTransform = 'scale(' + scaleRate
+ ')';
document.getElementById('all').style.OTransform = 'scale(' + scaleRate +
')';
document.getElementById('all').style.msTransform = 'scale(' + scaleRate +
')';
document.getElementById('all').style.marginLeft = shift;
document.getElementById('all').style.marginRight = shift;
}
</script>
備註：1.所有的版面需用<div id="all">給包起來。
2.解析度比版面設定的最適寬度小不縮放
3.解析度比版面設定的最適高度小不縮放
4.測試過ie6~ie9、firefox、chrome，解析度800*600-1680*1050
我是超新手，一切都是從網路查找拼湊而來，希望各位高手來討論討論，
順便給我改進的意見。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.240.17.250
1F：→ s25g5d4:document.getElementById('all')可以先用變數暫存起來 04/23 13:46
2F：→ s25g5d4:可以提升效能 04/23 13:46