Posts Tagged With: HTML5

[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 位部落客按了讚: