包括宽屏幕在内的满屏自适应

来源:互联网 发布:淘宝网店模板下载 编辑:程序博客网 时间:2024/05/01 18:27
 包括宽屏幕在内的满屏自适应
  前一个阶段主要做了不同屏幕尺寸满屏浏览的自适应,但是现如今又发展起来16:9宽屏浏览,给这一利用百分百相对尺寸定义的简单方法带来了麻烦。现在试用下列几种方式加以解决:
  1.修改html中的js代码:
        if (screen.availWidth/screen.availHeight > 1.5){
            top.window.resizeTo(screen.availHeight*1.33,screen.availHeight);
        }else{
            top.window.resizeTo(screen.availWidth,screen.availHeight);
        }
  如此控制主要考虑适应宽屏栏目的内容较少,在遇到宽屏的时候仍旧按照4/3显示,只高度自动充满,而在传统比例下仍自动满屏。
  2.适用于两种分开方式的js代码设定:
        onLoad="if (screen.availWidth/screen.availHeight > 1.5)MM_goToURL('parent','1920k.htm');
        return document.MM_returnValue"
  这样可以做到宽屏和传统屏幕的分开各自浏览适合的两个页面。
  3.这种分开浏览也可以在Flash中设定:
        if ((System.capabilities.screenResolutionX/System.capabilities.screenResolutionY)>1.5) {
            gotoAndStop(2);
        } else {
            stop();
        }
  如此在第一帧放入适合传统屏幕浏览内容,而在第二帧放入适合宽屏浏览的内容,画布尺寸仍旧按照传统比例设置,宽屏内容可以使右面超出画布,不会影响宽屏展示浏览。
    但是这样做只适合较为变化简单一点的内容,如果内容较复杂也可以分开做两个文件,在第一个文件中将
        gotoAndStop(2)替换为 loadMovieNum("1920.swf", 0) 也就是另调一个宽屏文件就可以了。
  如果你正使用宽屏,点击链接一个宽幅图像浏览页面:
http://www.zqihua.com/360d.htm
然后你再用传统屏幕还点击这里,将是一个窄幅浏览页面了。
  4.分开浏览的Flash另一种设定:
        if ((System.capabilities.screenResolutionX/System.capabilities.screenResolutionY)>1.5) {
            Stage.scaleMode = "showAll";
            this.leftMc.loadMovie("xxx.jpg");
            this.rightMc.loadMovie("xxx.jpg");
        }
  这样做主要因swf文件放在html页中用了自动充满参数,为防浏览器除工具栏后实际高并非固定而引起的露白边缘。而宽屏中宽度富余,判断后改变为固定比例即满足不变形,在两旁边可以调用一些装饰甚至广告补足,不正好填满宽屏浏览内容了吗!
  如果你正使用宽屏,点击链接一个宽幅图像浏览页面:
http://www.zqihua.com/photo1.htm
然后你再用传统屏幕还点击这里,将是一个窄幅浏览页面了。
原创粉丝点击