Posts Tagged With: HTML5

[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: 工作點滴, 技術分享 | 標籤: | 發表留言

[Chrome] 模擬行動裝置瀏覽器


話說,去年 10 月就在喊,Chrome 會在去年 12 月放出 低耗能 的正式版,終於在前兩天放出來了,紀念一下今天更新 Chrome ,就來看看工作利器,模擬行動裝置瀏覽器的操作步驟。

Chrome 57省電有一套,將背景分頁CPU使用率限制在1%內

選 Chrome 是因為夠直覺,但最重要一點是虛擬機沒法比的,就是 桌面版 Chrome 內建的開發工具,可以方便針對 javascript / css / html 語法除錯。

直接上 Chrome 57 的螢幕截圖:

從右上角 設定符號 展開選單,點選 [開發人員工具]

開發人員工具

開發人員工具

在開發工具 展開設定選單,點選 [Settings]

設定

設定

勾選需要模擬的內建裝置,或自己新增自訂裝置

新增自訂裝置

新增自訂裝置

開發工具在工具列點選 切換網頁為 裝置模擬畫面

切換網頁為裝置模擬畫面

切換網頁為裝置模擬畫面

選擇要模擬的行動裝置,這邊以 Microsoft Lumia 950 為例。

選擇模擬裝置

選擇模擬裝置

從工具列可以修改長、寬 (預設裝置),若已選定模擬裝置,只能選擇縮放比例跟轉向,部分裝置不提供轉向功能。

轉為橫向

轉為橫向

操作時,可看到一個大大的圓圈,是滑鼠模擬手指點選的中大圓形。

滑鼠模擬手點為中大圓形

滑鼠模擬手點為中大圓形

IE 11 雖然也有簡單的模擬功能,但是沒有這麼視覺化,Chrome 桌面版在桌面狀態下不支援 viewport 設定及 SVG 縮放,但是在行動裝置模擬狀態時則支援。

紀念一下 Chrome 節電 66%~

Categories: 電腦和網際網路, 行動裝置, 工作點滴 | 標籤: | 1 則迴響

[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: 工作點滴, 技術分享 | 標籤: | 發表留言

[H5] 讓 WebBrowser Control 直接相容 HTML5 網頁


讓 WebBrowser Control 直接相容 HTML5 網頁

利用 Google 搜尋 WebBrowser Control HTML5

https://www.google.com.tw/#q=WebBrowser+Control+HTML5

可以找出很多文章,關於強制讓 WebBrowser Control 以 HTML5 模擬環境執行的案例,例如這篇:

[C#]設定WebBrowser Control運行的User Agent版本

但是從網站開發者的角度來看,其實只要正確在 HTML 內標記後,就可以讓 WebBowser Control 支援 HTML5。

所以這篇是從 Server 端的角度來看,如果你是 Client 開發者,Server 端不是你能控制的,可以不要看這篇,看看上面引用的連結。

這個做法很簡單,就是在 head 區內加入 Meta 標籤,強制指定 IE 版本。

WebBrowser Control 核心就是 Internet Explorer 桌面版本的引擎,因此對於 IE 有效的標籤,對於 WebBrowser Control 也有效。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
...
</head>
...
</html>

若是網頁開發者,不妨直接從 Server 端解決這個問題,避免 Client 端要改寫程式碼,用此方法對 IE / WebBrowser 都有效,也不會影響 Chrome 或是行動裝置,是你好、我好、大家好的解決方案。

當然, IE8 以前本身就不支援 HTML5 就不用試了。

微軟的 Internet Explorer Developer 關於相容說明:https://msdn.microsoft.com/zh-tw/library/jj676915.aspx

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

在WordPress.com寫網誌.

%d 位部落客按了讚: