iPhoneで絶対に横向きのウェブページを作る - Yusuke Sugomori's Blog
iPhoneのネイティブアプリでは画面方向を縦あるいは横方向に固定できますが、Safariでは、画面の回転を防ぐ方法がありません（注１）。 そのためかは分かりませんが、PCではよく見かける横スクロールのサイトを、モバイルでは見かけません。 そこで、iPhoneの向きによらず、「絶対に横向きになるウェブページ」を作ってみました。横スクロールができるようになっています。 サンプルはこちらです。iPhoneの向きを変えて試してみてください。 画面の向きによらずスクロールを実現するために、CSS3の -webkit-transform の rotate や translate3d(x, 0, 0) を使っています。 回転によってCSSファイルを分けることによりスクロール以外の動きをCSS3のみで記述することも可能ですが、振り分けが面倒だったので、JavaScriptでCSS部分も制御しています。
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには │ これからゆっくり考L +α
2013年1月26日追記 時代の移り変わりとともに、このソースでは対応できなくなっているので 続：Androidブラウザでviewportのwidth指定[to-R] こちらのやり方がいいと思います！ これを横に回転させて、 画面幅に合わせて拡大したい。 これ、見にくくないのかな...と個人的には思うんですが、そういう依頼がちらほら来るのでまとめてみました。 サンプルページ http://sakaki0214.com/sample/110605/ 通常（横にしても拡大しない） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" /> iPhone用（横にすると拡大する） <meta name="viewport" content="wid
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidで-webkit-box-reflectによる鏡面効果を指定する方法 Androidで-webkit-box-reflectのマスク処理が使えない！とつぶやいたら@mattari_pandaからurl()による指定は聞くよと教えていただきました。 そもそも-webkit-box-reflectってなによ! 画像などの反射を制御することができるCSSプロパティです。WebKit独自のプロパティなのでSafariやChrome以外のブラウザでは利用できません。 -webkit-box-reflect:<direction> <length> <image>; といった感じで指定が可能です。 directionには上(above)、下(below)、左(left)、右(right)が指定できます。 lengthには反射画像の距離を指定できます。 imageにはマスク画像が指定できま
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
