作者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