解決flex4 分辨率自適應問題

首先是按照常規思維在app中設置

<mxml>
<s:Application .......
width="100%" height="100%"
minWidth="1280" minHeight="720">

這樣確實可以全屏，但是當屏幕縮放到小於1280*720時，瀏覽器並不會自動添加滾動條，所以網頁超出屏幕大小的內容就看不到了。

為了解決不出現滾動條，在網上找到了答案，並成功解決

 

http://stackoverflow.com/questions/4259434/flex-4-sscroll

設置Application的height和width屬性，不設置minHeight和minWidth，當 屏幕小於height和width時出現滾動條。

但是，這種方法可以實現滾動條，但是必須是設定height和width的固定 大小，也就是說當我的 屏幕大於這個設定的固定 大小時，瀏覽器重顯示的 網頁也只有width*height大，會出現空白區域，所以還是不能滿足自 適應的要求。

 

最終的解決方案是：

 <http://wbgen.com/blog/flex4%E8%AE%A9%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%B0%8F%E4%BA%8Eapplication%E5%A4%A7%E5%B0%8F%E6%97%B6%E5%87%BA%E7%8E%B0%E6%BB%9A%E5%8A%A8%E6%9D%A1>

在index.template.html文件（位於Flex項目文件中的html-template文件夾下）中添加js腳本，實現讀取當前 屏幕 大小，判斷獲取的 屏幕width小於1280px時width取1280px，當大於時，width去獲取的 屏幕width，height的設置方法也是這樣。

查看文本 打印 ?

 

var winWidth = 0;  
 var winHeight = 0;  
 function findDimensions()  
 {  
  //獲取窗口寬度  
  if (window.innerWidth)  
  {  
   winWidth = window.innerWidth;  
  }  
  else if ((document.body) && (document.body.clientWidth))  
  {  
   winWidth = document.body.clientWidth; //獲取窗口高度  
  }  
  if (window.innerHeight)  
  {  
   winHeight = window.innerHeight;  
  }  
  else if ((document.body) && (document.body.clientHeight))  
  {  
   winHeight = document.body.clientHeight;  
  }  
  //通過深入Document內部對body進行檢測，獲取窗口<strong>大小</strong>  
  if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)  
  {  
  winHeight = document.documentElement.clientHeight;  
  winWidth = document.documentElement.clientWidth;  
  }    
   
  var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;  
  if(winWidth < 1280)  
  {  
  cssSize[0].style.width = "1280px";  
  }  
  else  
  {  
  cssSize[0].style.width = "100%";  
  }  
   
  if(winHeight < 720)  
  {  
  cssSize[0].style.height = "720px";  
  }  
  else  
  {  
  cssSize[0].style.height = "100%";  
  }  
 }  
   
 window.onresize=findDimensions;    
   
 function pageInit() {  
    //調用函數，獲取數值  
   findDimensions();  
 }   

 

 

然后在Flex中App中設置

width="100%" height="100%"

這樣即可實現自 適應的同時設定 網頁的最小width和height。

在ie8中，“開發人員工具”中“腳本”中就可以看到這個index.template.html文件了，所以flex 網頁最終也是以html形式存在，flex生成的swf 網頁只是html中的一個object

為了確保萬無一失，我將index.template.html中object的width和height都設成100%。