2011-12-07 44 views
2

我在47英寸液晶電視上打開了Stack Overflow網站(分辨率爲1920 * 1080,16:9),並在很多空白處找到了文本和網站。該文本是不可讀的,因爲像其他許多網站一樣,堆棧溢出已針對標準1200/1024視口進行了優化。如何在使用Javascript的瀏覽器上獲得'Ctrl +'行爲?

爲了使網站可讀,我按了'ctrl'和'+'鍵,並得到的內容佔用更多的屏幕寬度。我相信這不是「放大」,因爲瀏覽器實際上在做的是擴大內容大小(即減少每個字符的像素數量)。

在檢測到視口的分辨率/大小參數後,可以使用Javascript作爲預渲染練習來實現此'ctrl +'行爲嗎?

更新:我嘗試了@ media-queries,它縮放字體大小和其他一些東西,但它沒有幫助以平衡的方式縮放圖像和其他內容(如填充等)。最重要的是,它不滿足條件來限制給定的div的大小,說可用的屏幕寬度爲「610px,但佔用75%」。

如果我們在Gecko/Webkit瀏覽器上按ctrl +,這就像分辨率的變化。抱歉,不能接受下面的答案。

回答

3

大多是。 IE6,7有zoom和IE8有-ms-zoom

其他人都有2D變換和scale()所以你被覆蓋。見zoom css/javascript

我沒有看到任何人應用這種效果的整個文件,所以事情可能是越野車。請享用!

+0

這是一個很酷的提示@保羅。讓我看看結果,並儘快回覆。 – marvindanig

+0

我嘗試使用scale(),但最後我得到了這個使用另一種算法。以下是以分辨率固定方式解決的演示頁面:http://bubbles.bubbleideas.com/letters/arvind-arvind-nigam-bubbles-bubbles-semantics-bubbles-june-12th-tuesday-06-pm含義無論用戶做了多少Ctrl +/Ctrl-操作,紙張都會像設備像素/屏幕一樣靜止不動。對不起,這麼晚更新。 – marvindanig

1

我敢肯定這是可能的JavaScript,因爲大多數事情似乎是,但我認爲這是CSS Media Queries是專門設計來解決的確切類型的問題。

請查看文章的Responsive Web Design over at A List Apart

+0

指定最大寬度最小寬度範圍(@ media-queries)確實有幫助,但它似乎沒有在瀏覽器上給出'ctrl +'的確切效果。例如,以下網站有一個響應式網頁設計:http://foundation.zurb.com/,但它不能完全放大以填充整個電視屏幕並且同時可讀。我必須使用'ctrl +'來放大文字和圖像的大小。我相信響應式設計更注重處理橫向和縱向模式之間的內容佈局。 – marvindanig

+0

那麼,當屏幕寬度非常大時,該網站的固定寬度佈局約爲980像素。這是「ctrl +」效果,你想要應用到你自己的網站或瀏覽器插件? –

+0

是的。我正在考慮製作一個完全基於百分比聲明設計的網站,只有'最小寬度'才能確保在瀏覽器縮小/調整大小時保持佈局整合性。是否有任何已知/完成的方式(使用JavaScript)來確保瀏覽器擴展到分辨率,其中%寬度最終會提供固定像素數的元素尺寸? – marvindanig

相關問題