Android – WEBってなんだろう

スマートフォンでテキストエリアをフォーカスしたら中身を選択済みにする

こういうの、PCではあるけどスマホでは見当たらない。
http://tmlife.net/programming/javascript/textarea-all-select.html

と思ったら、ソーシャルゲームの友達募集ページでは実装されてた。
http://pazudora-friend.com/che/

<input type="text" name="fbshare" onfocus="this.selectionStart=0; this.selectionEnd=this.value.length;" onmouseup="return false" value="自動で選択できます。">

動作確認結果

機種によって不安定なので、その旨クライアントさんに伝える必要あり。

■選択できたりできなかったり
iOS8.4safari

■選択されない（普通に選択はできる）
Android4.2 標準ブラウザ

■使いやすい
Android4.2 Chrome

Android2.3で画像をズームアニメーションするときのバグ

Android2.3で画像をズームしていく、みたいな演出をする時。
こんなかんじのソースを書いたのだけど。

	$(window).on('load',function(){
		var gameW = $('.gameWrap').width();
		$('.gameWrap').css('height',gameW);
		$('.gamebg').animate({width:gameW*3,top:-gameW,left:-gameW},3000);
	});

実際の画像のサイズ以上に拡大すると表示がバグった。
元から画像サイズを一番ズームしたい状態と同じ解像度で書き出して、
通常時は縮小表示してやるようにしたら治った。

例えば幅640pxの画像を三倍にズームしたい場合、
用意する画像は1920pxであればよい。
画像書き出しの際には、幅640pxの画像と同じ重さになるまでがっつり圧縮をかけてやる。

retinaディスプレイ対応の際に、2倍サイズの画像を高い圧縮率で保存して、1/2に縮小して使うという方法が提唱されていたのだけど、それと同じ考え方ですね。

参考サイト様
Retina revolution

スマートフォン用にアニメーションをjQueryとcss3で作ったので便利だったページをメモ

PCサイト用のFlashをスマートフォン用にjQueryとcss3で書きなおしました。
便利だったページをメモします。

基本機能を確認

jQueryの日本語リファレンス
http://js.studio-kingdom.com/

jQueryのイージングプラグインの動きまとめ
http://easings.net/ja

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）
http://www.flapism.jp/html/416/

ベンダープレフィックスの扱い

ベンダープレフィックスの整理整頓
https://w3g.jp/blog/vendor_prefix_cleaning

ベンダープレフィックスの順序
http://kojika17.com/2013/02/ordering-vender-prefix.html

Androidの限界

@keyframesとAndroid（CSS3のアニメーションのバグのまとめ）
http://blog.webcreativepark.net/2012/02/12-141313.html

Android2.3ではCSS3でイージングは使えないみたい。
回転軸の指定とかも難しいかも。
あと、Android2.3ではメモリの限界？で、同一画面内で複数箇所以上アニメーションさせると動かなくなりました。
どの要素をアニメーションさせるか取捨選択は必要ですね。

上下中央揃えcss（IE9以上）

ストレッチもできるっぽい。
Android2.3
iOS7 safari chrome
にて、動作確認済み。

<div class="demo">
<p>天地の中央に配置</p>
</div>

.demo p {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

参考
[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

webkit系のborder-radiusバグのメモ

webkit系でborder-radiusプロパティを使いスライドをした場合バグる。
http://webpad.felicyle.com/coding/webkit-border-radius/

webkit border-radiusとposition absoluteを組み合わせると不具合
http://hai3.net/blog/2012/07/31/webkit-border-radius%E3%81%A8position-absolute%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/

percentage値は
・古い Chrome と Safariでサポートされていません（2010 年 9月に修正されました）
・Opera 11.50 以前ではバグがあります
・Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
・古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

う～ん。なんということだろう。
アニメーションしたりするとハマるよね。
初めから対応機種ほうがいいかもね。
情報提供していただいた上記サイトに感謝です。

【SP限定】border-imageでいろんなワクをつくろう。

PCでは対応状況が悪いので使い物にならないが、
スマホでのコーディングでは有力かもしれない。
アンドロイドでの、特殊枠画像で、画像がずれたりしないのだ！！

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div{
	border-style: solid;
	border-width: 30px 25px 20px 25px;
	-moz-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-webkit-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-o-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	border-image: url(../img/bg_form.png) 30 25 20 25 fill stretch round;
}

下記の解説とジェネレータが秀逸。

http://www.htmq.com/css3/border-image.shtml
http://border-image.com/

ユーザーエージェントによって読み込むcssとスクリプトを変更する。

iOSとそれ以外で分岐さす例。
納期直前にバグが出ても、ある程度はリカバリできるかも（厭だけど。）

<script type="text/javascript">
	useragentcheck();
	function useragentcheck(){
		var agent = navigator.userAgent;
		if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1){
			require('js/custom.js');
		}else{
			loadingcss('css/noios.css');
			require('js/customnoios.js');
		}
	}

	function require(src){
		var element=document.createElement('script');
		element.type='text/javascript';
		element.src=src;
		document.getElementsByTagName('head')[0].appendChild(element);
	}

	function loadingcss(href){
		var element=document.createElement('link');
		element.rel='stylesheet';
		element.href=href;
		document.getElementsByTagName('head')[0].appendChild(element);
	}
</script>

パソコンサイトからスマホサイトへの導線３

今度はキャッシュなしバージョン
こちらを参考にして書き換えました。

http://zuboraism.com/javascript/28.html

<script type="text/javascript">
useragentcheck();
function useragentcheck(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1 || agent.search(/Windows Phone/) != -1 || agent.search(/Symbian/) != -1 || agent.			search(/BlackBerry/) != -1 ){
	redirect();
	}
}
function redirect(){
	if(confirm('スマートフォン版ではお手持ちのスマートフォン内のアルバムやInstagramからアップロードしてTシャツを作成出来ます。スマートフォン用サイトを開きますか？')){
location.href = '/sp/';}
}
</script>

Android2.3でフォームのバグ

selectタグをjQueryで可視化・不可視化などすると、
Android2.3で、正常に挙動しなくなる。
例えば以下のように書き換えてやればいい。
ポイント。
document.getElementById(‘quoAllWrap’).setAttribute(‘style’,’display:block’);

			function formchange(){
				if(formFlag == 'quo'){
					$('#koukonAllWrap').hide();
					document.getElementById('quoAllWrap').setAttribute('style','display:block');
					//$('#quoAllWrap').show();
					exvalidationgo();
				}else{
					$('#quoAllWrap').hide();
					document.getElementById('koukonAllWrap').setAttribute('style','display:block');
					//$('#koukonAllWrap').show();	
					exvalidationgo();
				};
			};

出典
https://www.facebook.com/alicecode/posts/145516658904010

カテゴリー: Android

レスポンシブサイトで遭遇するフォントサイズのバグまとめ

remを使っている時、chromeでだけフォントサイズがおかしい

参考サイト様

textareaのフォントサイズがchromeでだけおかしい

参考サイト様

Android4系でpタグが変な位置で折り返される

参考サイト様

Androidのchromeで文字サイズが大きくなる

参考サイト様

iOSで文字サイズが変になる

参考サイト様

スマートフォンでテキストエリアをフォーカスしたら中身を選択済みにする

動作確認結果

Android2.3で画像をズームアニメーションするときのバグ

スマートフォン用にアニメーションをjQueryとcss3で作ったので便利だったページをメモ

基本機能を確認

ベンダープレフィックスの扱い

Androidの限界

上下中央揃えcss（IE9以上）

webkit系のborder-radiusバグのメモ

【SP限定】border-imageでいろんなワクをつくろう。

ユーザーエージェントによって読み込むcssとスクリプトを変更する。

パソコンサイトからスマホサイトへの導線３

Android2.3でフォームのバグ