2015年10月30日

【サイトのスマホ対応】youtube埋め込みに注意せよ

Android板chromeでは問題ないが、標準ブラウザで動作が停止してしまう現象。
パートごとにコメントアウトしていくと、youtube埋め込みが原因だった。
1ページ内にたかだか4つの埋め込みをしているだけだったが、それでは当方の端末では駄目だったようだ。
http://blog.psocafe.com/view/2968
こちらの助言にしたがって埋め込みを減らしてサムネイル画像に変更して解決
サムネイル画像は、youtubeから常にゲットできるんだねぇ。
http://youtubethumbnailgenerator.blogspot.jp/

posted by シマウマ at 11:27| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年10月28日

IEで img タグの width が効かない

IEで<img>タグ内のの width が効かないことがあった。
<img src="…" width="70">
で原寸表示されてしまう。
<img src="…" style="width:70">
で正しくリサイズされた。
なんだろ。。。

posted by シマウマ at 10:33| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする

2015年10月27日

noscript処理は必要なんだろうか。

いまどき必要?
さて?
やる必要があるとなると、けっこう手間ですよね。

タグ:javascript 忍耐
posted by シマウマ at 23:31| Comment(0) | javascript | このブログの読者になる | 更新情報をチェックする

【サイトのスマホ対応】お役立ちリンクとメモ

サイトのスマホ対応を数年おくれくらいでしたので、お役立ちリンクとメモ。

(1) http://mattkersley.com/responsive/
ここは、スクリーンサイズ別のサイトの見え方をシミュレートしてくれるところ。
すばらしい。
UserAgentは変わらないのでこれだけでスマホ対応というのはちょっと無理があるかもだけど、だだだっとウィンドウを並べてくれるので、わかりやすい。

(2) http://walking-elephant.blogspot.com/2012/04/user-agent.html
これは少し古めだが、超驚いたサイト。
UserAgentを変更してスマホのシミュレートするのは、chromeやIEで拡張機能なしで簡単にできたんだね。 全然知らなかった。あんまりネットでも紹介されてないよね。。。アタリマエすぎるのかな。
携帯(ガラケー)のシミュレートもできるのかな。やってみてない。
chromeはエラーチェックなどもしてくれるみたいだけど、うーん、まだ使いこなせてない。
IEのF12 開発者ツールではWindowsPhone以外のUserAgentは自力で入力する必要がある。
UserAgent一覧はこちら。
http://www.openspc2.org/userAgent/

(3)cssの切り替えについて
http://webdesignerwork.jp/web/responsivewebdesign/
基本、上記を参照してやってみた。スクリーンサイズだけを根拠にした切り分け。
要するに @media screen and (min-width: 641px(例)){…の使い方を勉強したってこと。
上記のうち、タブレット判定(641px-768px)は要らない気もする。シミュレートしたり実機で見たりしてもPCと同一のコードで現状はいけてる。スクリーンサイズだけで対象をタブレット扱いすることも無理があるし。
ほかにスマホ判定やタブレットが必要な場合はphpで。当方はスマホ判定だけしているので以下。
という感じ。
javascriptでもできる。
https://w3g.jp/blog/js_browser_sniffing2015
こっちの方がいいかも。

でも、スクリーンサイズとは別にスマホ判定していいことって実際にはあんまりないような気も。
スマホだけ <a href='tel:… を使う、くらいかなぁ。
そんなのPC環境でもあってさほど悪くないし、実際のところスマホかどうかの判定っていまやあんまり意味なくて、スクリーンサイズ判定で必要十分ではないかしら。

(4) CSS切り分け以外に必要なこと
body{ -webkit-text-size-adjust: 100%; }
は必須。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">も必須。
viewportについてはこちらも一読を!
当方は多数の項目を一覧表示させたインデックス画面から各項目の詳細情報を見せるとき、PCではインデックス画面内に表示してきたがスマホでは別ウィンドウを開くように仕様変更した。
このように<a>タグの行き先自身を変えるようなときはCSSだけではできないので、スクリーンサイズなりスマホなりの判定で条件分岐してやる必要がある。

(5) 画像サイズ
上記参照(3)にあるようにcssで
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
としとけばおおむね解決だが、
  • スマホモードでメニューを縦並びにすることになるとメニュータイトルに使ってる画像などが100%では幅不足になる。スマホ表示で縦並びにする画像は幅640pxで作っておいてwidth指定するのが吉。
  • lightbox_plus利用のページでは上記のimgタグ一括の定義では問題が出た。lightboxの別窓がいつまで待っても開かなくなった。lightboxで開かせる画像ではこの定義をはずす必要がある。
(6) ガラケーのシミュレート
今回の作業とは関わりないが、ガラケーのシミュレートならここが定番。
Goo モバイル サイトビューワ
http://emu.mobile.goo.ne.jp/emu/emu.php
docomoが作っているスタンドアロンのアプリもあるが、それよりもいい。
実は携帯用の関連サイトを検索する場合もこれを使っていたりする。


posted by シマウマ at 00:04| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする