在 iOS 網站當你點擊輸入框或下拉選項避免自動 zoom in

Monkianer

在 iOS safari 或 chrome 中當你要輸入文字時，文字框會自動 zoom in。

要避免這種情形可以使用以下 CSS，原因是 iOS 會強制將小於 16px 的 input 與 select 文字 zoom in 至 16px 大小，而預設的 input 以及 select 字體大小都為 11px ，所以你只要自行將 input 與 select 的字體大小指定為 16px 就好了。

以下 CSS 你可以全貼上，也可以選擇你需要的項目指定就好。
注意如果你有自行設定 input 和 select 其他字型大小(小於 16px 的) 你可以用 !important; 讓後續的 CSS 失效。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

 

Page Focus Detection

Monkianer

音樂或音效常常會持續播放，儘管瀏覽器已經在背景模式。
利用這個小工具偵測網頁目前是否正被使用，並暫停網站的一些功能。

See the Pen PSpageFocusDetection by Monkianer (@monkianer) on CodePen.

var pageFocusDetection = {
	interval: null,
	init: function(){
              this.add();
	},
	focusInAction: function(){
		
	},
	focusOutAction: function(){
		
	},
	checkPageFocus: function() {

		var _this = pageFocusDetection;
		if ( document.hasFocus() ) {

			_this.focusInAction();
		} else {

			_this.focusOutAction();
		}
	},
	add: function(){
		pageFocusDetection.interval = setInterval( pageFocusDetection.checkPageFocus, 200 );
	},
	remove: function(){
		clearInterval( pageFocusDetection.interval );
	}
}

用法

pageFocusDetection.focusInAction = function(){
	// 正在使用時才需要的動作，例如：音效
};
pageFocusDetection.focusOutAction = function(){
	// 不在使用時要停止的動作，例如：音效
};
// 初始
pageFocusDetection.init();

 

如何從 Illustrator 匯出 SVG 使用

Monkianer

See the Pen SVG Animation by Monkianer (@monkianer) on CodePen.

1. 命名及匯出 SVG

先在 Ilustrator 裡命名好每個物件的名稱

選擇 File -> Export -> Export As SVG 依照下圖的選項確認匯出

打開匯出的檔案會發現 SVG 裡圖形的 id 會使用你剛剛命名的圖層名稱，不過 Illustrator 匯出只能將圖層名稱轉為 ids 所以如果你有 20 個 coin 圖層名稱就會被變成 coin-1, coin-2 …..。這樣對統一使用樣式或動畫並不方便，所以可以使用 SVGO 幫助我們。

2. 使用 SVGO 將 id 轉為 class

下載有 illustratorLayerIdsToClasses plugin 的 SVGO 版本，使用 npm 安裝。安裝時加上 -g 全域參數使你在任何地方都可以呼叫 SVGO

npm install -g path/檔案位置

輸入以下指令。 -i 為輸入從 path/test.svg，-o 為輸出檔案為 path/test.min.svg，–enabled=illustratorLayerIdsToClasses 為使用該 plugin。

svgo -i path/test.svg -o path/test.min.svg --enable=illustratorLayerIdsToClasses

最後得到結果。就可以使用 class 來指定動畫效果了。

感謝參考網址：1,  2