---急问---网页分辨率问题

vivi12

上官无忌 发表于 2012-6-17 22:53
1024x768  

弄个div做容器  居中

现在是按照普及率最广的1024x768分辨率在做。因为网站的页面想做成不需要用户上下左右拖动鼠标的特点，在1024x768下正好是满屏，但用分辨率高的电脑上看，就是正上方一小块，特别变扭。如果可以都是满屏就好了。。。
好像除了用flash作以外以外，没有别的解决办法了吧。

上官无忌

vivi12 发表于 2012-6-18 01:34
现在是按照普及率最广的1024x768分辨率在做。因为网站的页面想做成不需要用户上下左右拖动鼠标的特点，在 ...

你们会用库吧 ?  jq之类的 .

  计算下 时刻居中就好啦

大雄胖福

coka2cora 发表于 2012-6-17 21:00
DW有评估浏览器兼容性的功能

我一般在DIV里设容器。可是设好的容器常常经不住考验。很怪呀。
常常做好后前一些时间没有问题，过一些日子再看时，在有些显示器里总是会整体偏向一边

vivi12

上官无忌 发表于 2012-6-18 05:39
你们会用库吧 ?  jq之类的 .

  计算下 时刻居中就好啦

现在是居中的，但是不同分辨率下还是不一样。
以下是快照，请看一下

1024x768下的（可能因为我的电脑是宽频所以最下方才会有空白请无视，对方说在这个分辨率下作的满屏）


1920x1080下的


在高于1024x768的分辨率下看就是这样的，可能是因为白色底色和银色反差大的关系，看起来很变扭
对方说，除了flash，没有办法实现任何分辨率下就是满屏。请问有其他办法可以解决或者弥补吗

vivi12

ddddddddddddddddddddddd

vivi12

滴滴答答地弹道弹道弹ddddd

上官无忌

http://panasonic.co.jp/products/
http://mb.softbank.jp/mb/customer.html
http://www.nttdocomo.co.jp/

翻翻人家的代码. 看看人家是怎么做到的.  

vivi12

上官无忌 发表于 2012-6-19 05:39
http://panasonic.co.jp/products/
http://mb.softbank.jp/mb/customer.html
http://www.nttdocomo.co.jp/  ...

一家是flash，另外两家是把上方的图片扩大化到满屏了，我不是很懂，但是谢谢了

vivi12

ddddddddddddddddddddddddddddd

youkenkin

浏览网页，时常会发现自己的浏览器窗口不见了，但网页内容还在。这种效果是不是很神奇呢？实现此种功能只要有三种原理，按实现方法的不同，给它们各起了个名字，分别是：瞒天过海法、借尸还魂法和返璞归真法。不要被它们的名字吓着了，其实实现起来并不困难，只要看了下面的内容，就明白个中道理了！

一、瞒天过海法-javascript

我们知道，显示器的分辩率大小决定了我们看到的程序窗口的面积大小，分辩率越大，窗口面积越大，看到的内容就越多。但并不是说显示面积越大就越好，因为分辩率的变化会带来菜单文字的变化，可能会影响软件界面的字体美观。此乃题外话，就不细说了。浏览器同样是一种程序，其窗口的大小，我们可以利用脚本语言来控制调整，这样我们就可以实施瞒天过海法来达到全屏目的，方法是在网页文件的头部，也就是   <   head   >   与   <   /head   >   标签之间加上下面这段   javascript   代码：

<   script   >
<   !--
function   omiga_window(){
window.open( "12.htm ", " ", "fullscreen=1,menubar=0,toolbar=0,directories=0,location=0,
status=0,scrollbars=0 ")
}
//--   >
<   /script   >

代码功能是由一个网页调出另一个浏览器窗口，加上设置语句，设置新窗口的大小为全屏，然后新的网页内容就显示在此窗口里，借此实现了全屏。

不要忘记在网页文件的   <   body   >   标签里加上加载网页里调用函数的代码。代码设置如下：

<   body   onload= "omiga_window() "   onBlur= "self.close() "   scroll= "no "   >

二、借尸还魂法

可能有些朋友见到代码就害怕。告诉你，不怕！不懂脚本代码的我们可以使用   Dreamweaver   的插件，借尸还魂！实现全屏！

首先我们到点击下载   “MFX-fullscreen.mxp”插件   到自己的硬盘里，接着打开   Dreamweaver4   菜单栏“Commands”，选择“Manage   Extensions”命令，打开插件管理工具“Macromedia   Extension   Manager”，按“Ctrl   +   i”快捷键把插件安装好。

接下来的事情就相当轻松了，重新启动一次   Dreamweaver4   ，按“Shift   +   F3”打开行为面板，再按快捷键“Ctrl   +   Tab”进入源代码窗口，点击行为面板的加号按钮，在弹出的菜单中选择“MFX”里的“MFX-fullscreen”命令马上可以看到   <   head   >   和   <   /head   >   是加入了全屏的代码，同时   <   body   >   里也加入了“onLoad”加载函数。按   F12   就可以看到全屏的效果。注意，没有进入源代码窗口该命令呈灰色，是不可选的。

没有插件的朋友可以复制以下代码到网页文件：

<   script   language= "JavaScript "   >
<   !--
function   MachakFull(Ie,other){
//Copyright   ?1999   m.milicevic   [email protected]   [email protected]
x=screen.availWidth;
y=screen.availHeight;
target   =   parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf( '. ')-1,navigator.appVersion.length));
if((navigator.appVersion.indexOf( "Mac ")!=-1)   &&(navigator.userAgent.indexOf( "MSIE ")!=-1)   &&(parseInt(navigator.appVersion)==4))
window.open(other, "sub ", 'scrollbars=yes ');
if   (target   > =   4){
if   (navigator.appName== "Netscape "){
var   MachakFull=window.open(other, "MachakFull ", 'scrollbars=yes ', 'width= '+x+ ',height= '+y+ ',top=0,left=0 ');
MachakFull.moveTo(0,0);
MachakFull.resizeTo(x,y);}
if   (navigator.appName== "Microsoft   Internet   Explorer ")
window.open(Ie, "MachakFull ", "fullscreen=yes ");
}
else   window.open(other, "sub ", 'scrollbars=yes ');
}
//--   >
<   /script   >
<   /head   >

当然， <   body   >   里也加入了“onLoad”加载函数，代码如下：

<   body   bgcolor= "#FFFFFF "   text= "#000000 "   onLoad= "MachakFull( 'full_window.htm ', ' ') "   >

看了前面的两种方法，分析源代码，我们注意到，都必须先打开一个原来的窗口，我们称之为A，然后再调出一个新的浏览器窗口，我们称之为B。当   B   窗口打开时，就实现全屏了，并且位于最前面。但前面的两种方法都没有把原来的窗口   A   窗口关闭。我们可以在   <   body   >   里加入关闭的代码“onBlur= "self.close "”或者“onBlur= "javascript:window.closer() "”。可是，此两种关闭都会弹出一个关闭的提示框，如下图：


无疑它影响了整个网页的显示效果！有办法解决么？当然有！请看下面的返璞归真法：

三、返璞归真法

此法是最完美的一种全屏方式，实现代码与相应简单，一个完整的全屏网页代码如下：

<   html   >
<   head   >
<   title   > 123 <   /title   >
<   meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   >
<   script   >
<   !--
function   omiga_window(){
window.open( "full_window.htm ", " ", "fullscreen,scrollbars ")
}
//--   >
<   /script   >
<   /head   >

<   body   onload= "omiga_window() "   onblur= "focus();closes.Click(); "   scroll= "no "   >
<   object   id=closes   type= "application/x-oleobject "   classid= "clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11 "   >
<   param   name= "Command "   value= "Close "   >
<   /object   >   
<   p   >   <   /p   >
<   p   >   <   /p   >

全屏！

<   /body   >
<   /html   >

实现全屏的代码跟之前的两种方法相类似，差别就在于可以自动关闭原来的A窗口，并且不出现提示。不出现提示的奥妙在于   <   body   >   标签里的：

onblur= "focus();closes.Click(); "

以及 <   body   > 和 <   /body   > 之间的：

<   object   id=closes   type= "application/x-oleobject "
classid= "clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11 "   >
<   param   name= "Command "   value= "Close "   >
<   /object   >

要实现返璞归真完美全屏方式，不要漏了上面两段代码哟！