Posts Tagged With: SVG

[H5] 偵測不同裝置的解析度


在 DHTML4 的年代,我常常用 VML 來處理未知螢幕解析度的縮放,到了 HTML5 的年代,當然就是改用 SVG 。

使用 SVG 處理縮放通常希望開啟網頁時,能自動縮放到最佳解析度,Windows 下還好除錯,行動裝置就很麻煩了。

Windows 裝置 IE/Edge 支援縮放,Chrome 則不支援。

原先寫的程式碼多半參考網路上的,各有出處,說法也不同,所以就發生 Android 正常時,iOS 就不正常,iOS 正常時,Android 就不正常。

所以乾脆用個除錯網頁分別讓不同瀏覽器去跑,下表是三個裝置 javascript 抓到的值,其中 IE11 的螢幕解析度 1920×1080 ,螢幕字型 125% (120 DPI) 。

IE11 Android 8.0 iOS 11.4
window.innerWidth 1536 1440 980
window.innerHeight 807 2240 1472
window.outerWidth 1550 360 0
window.outerHeight 878 560 0
window.screenX -7 0 0
window.screenY -7 0 0
window.scrollX undefined 0 0
window.scrollY undefined 0 0
window.pageXOffset 0 0 0
window.pageYOffset 0 0 0
window.devicePixelRatio 1.25 3 3
window.screen.width 1536 360 414
window.screen.height 864 640 736
window.screen.availWidth 1536 360 414
window.screen.availHeight 864 640 736
window.screen.deviceXDPI 120 undefined undefined
window.screen.deviceYDPI 120 undefined undefined
window.screen.logicalXDPI 96 undefined undefined
window.screen.logicalYDPI 96 undefined undefined
window.screen.systemXDPI 120 undefined undefined
window.screen.systemYDPI 120 undefined undefined
window.screen.pixelDepth 24 24 32
window.screen.msOrientation landscape-primary undefined undefined
document.body.clientWidth 1503 964 964
document.body.clientHeight 2555 5674 3201
document.body.scrollWidth 1848 4900 987
document.body.scrollHeight 2555 5695 3243

果然實作才是硬道理,可以得到:

實際解析度寬:window.screen.width * window.devicePixelRatio

實際解析度高:window.screen.height * window.devicePixelRatio

針對 Android 8.0 的分割視窗會發現 window.screen.height 變小,仍可使用 (分割時為 247)

至於最適化 (Auto fitting) 螢幕大小部分,我原先是先在 HTML5 的 HEAD 預埋:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=0.1″ id="metaViewport" />

再透過 javascript 依 svg 圖面大小變更 metaViewport.setAttribute(“content", sViewportContent);

從網頁搜尋到的結果,一般是將 width=設定寬度, height=設定高度

自己整理表格後發現,用 sViewportContent = “initial-scale=" + scaleWidth; 即可。

使用 svg.width / window.screen.width 或 svg.height / window.screen.height 就看設計者要以寬度或高度為目標來調整。

廣告
Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[H5] 筆記:SVG 拉伸圖片


這篇沒啥好看的,我自己做個筆記而已。

搜尋到的資料發現,想要在 SVG 內拉伸圖片要靠濾鏡,也就是使用 feImage ,改了一堆 HTML5 語法後,忽然在 MSDN 文件上看到一個該屬性也可以給 image 用…

結果用下面這段就可以了:

<image x="3" y="3" width="320" height="200" xlink:href="圖片" preserveAspectRatio="none" />

也就是說,加上 preserveAspectRatio 屬性即可,白改半天了…

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

[H5] 讓 Internet Explorer / WebBowser Control 支援 SVG 內的走馬燈


IE 支援 HTML5 不完整是已知的事實,對 IE 的抱怨就不多說了,直接談問題吧。

因為考慮到行動裝置縮放問題及智慧電視展示,在開發長時間展示畫面因為不確定將會在 Full HD 的電視顯示、電腦或是行動裝置,因此透過 HTML5 + SVG 算是比較通用的方案,IE / WebBowser Control 也能有不錯的支援。

由於有縮放問題,所以傳統 HTML4 的 marquee 就不太適合。

配合 SVG 的語法,嵌入走馬燈可以選用 animate:

<svg x='3' y='712' width='1366' height='36'>
   <animate TARGETELEMENT='ID名稱' xlink:href='#ID名稱' attributeName="x" from="1366" to="-2000" dur="30s" repeatCount="indefinite" />
   <text x='0%' y='70%' fill='white' id='ID名稱'>走馬燈或跑馬燈的文字</text>
</svg>

但是很冏,Internet Explorer / WebBowser Control 不支援,從微軟網站可以找到程式碼透過 Script 跑,所以算是客製化,針對每個 ID 都要自己寫。

為了節省時間,可以到這個網站下載已開發好的套件,官方首頁為:https://leunen.me/fakesmile/

從 Source Code 下載 smil.user.js ,再於 head 區引入即可。

<head>
   <script type="text/javascript" src="smil.user.js"></script>
</head>

不會妨礙 Chrome 或行動裝置相容。

當然比較起來,Chrome 跑起來比較順,IE 跑起來就比較閃爍了。

Categories: 工作點滴, 技術分享 | 標籤: | 發表留言

在WordPress.com寫網誌.

%d 位部落客按了讚: