[iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定
iOS 6になってiPhone 5以降の縦長画面でstandalone modeで起動してもiPhone 4のサイズにしかならず上部に余白ができるのなんでかなーっと思ってたのを解決できたのでメモ。 多分ちゃんとgoogle先生にお尋ねすれば直ぐに答えは見つかったんだろうけど… Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない このころから悩んでたんだなー ＊standalone mode ホーム画面に追加で追加したアイコンから起動し表示された状態。 meta apple-mobile-web-app-capable を yes にする。
![[iOS 6][iOS 7] mobile Safariのstandalone modeでフルスクリーンにするviewport設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f6fb6f3d056cc5db08f8644724ec0852d6e164c/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2Fcontents%2Fwp-content%2Fuploads%2F2013%2F10%2F2013-10-22-17.25.40.png)
sagen.js 熟成中。端末やportrait, landscape判定とかviewportをゴニョゴニョします
sagen.js on gitrub レスポンシブなプロジェクトで使えるJavaScriptライブラリーsagen.jsを作ってます。 githubのお勉強会にも行ったしせっかくなのでgithubで１人でプッシュしたりコミットしたりプルしたり。 https://github.com/taikiken/sagen.js 元ネタは device.js 。 iOS 7のiPad判定がアレだったり、portrait, landscape判定がアレだったりしたので自分で作ることにしました。 いくつかの実践をへて現在のバージョンはまだまだマイナーな0.2.12。 世間にさらすことで至らない点をご指摘頂き改良していきたいなーと考えてます。 依存ファイルは無いので単体で動作します。 jSファイルをリンクすると端末を判定して html タグにcss classを挿入します。 <script type="te
[JavaScript] スマホ・タブレットのportrait / landscapeを調べたい
レスポンシブしてますか？ ネット上の「レスポンシブが簡単に実装できる」ネタでまともなものが一つもなく、ゴミみたいな情報をありがたがる奴が多すぎておじさんとしては違和感を覚える今日この頃です。 いや、言い過ぎた。 ネット上の記事を全て見てるわけではないので正しく導いてくれるステキな記事はあるはずです。 まぁこの記事もゴミの一つですけど… 今回は間接的にレスポンシブに関する話題 iOS, Android ブラウザでの portrait / landscape です。 以前に同じテーマの記事を投稿していて今読み返すと恥ずかしくて直視できない内容で本当に申し訳なく思います。 スマホ（タブレットもだけど）のportrait / landscapeを調べたい コンテンツ全体が成り行き（%指定）で仕上がっていればJavaScriptをワザワザ登場させるまでもありません。 しかし実コンテンツではなかなかそ
デベロッパー登録を更新し2台目のMacにiOS開発環境をセットアップするためのメモ
自分用のメモです。 2台目のMacにもiOS開発環境をセットアップするための覚え書き。 Apple Developer Program Activation Codeを購入し登録を更新しました。 1台目のMacの証明書を更新 キーチェーンアクセス ・証明書アシスタント > 認証局に証明書を要求… ・デベロッパー登録時のメールアドレス入力 ・ディスクに保存 ・鍵ペア情報を指定（鍵のサイズ：2048ビット, アルゴリズム：RSA） CertificateSigningRequest.certSigningRequestをディスクに保存。 iOS Provisioning Portal > Certificates 証明書をRevoke “Request Certificate”をクリックしCertificateSigningRequest.certSigningRequestを選択し”subm
iOS 7, mobile SafariのURLバーは消せない（ことも無いらしい）でもやっぱりダメみたい
風が心地よい季節、朝晩は少し寒かったりするのでTシャツに上着をはおりました。 まだ半ズボンだけど。 iOS 7登場して数週間。 iPhone 5S, 5Cを既に手にした人も多いかと… 新しくなった mobile Safari ちょっと気になったことを書き留めておく。 mobile Chrome と同じような仕様に変わちゃった。 Android ChromeのURL barは消せないと知った絶望感 ＊requestFullscreenを使う方法もあるようなので、追記してます。通常の閲覧でフルスクリーンをユーザーにしいるのはかなりアレなので使うことはないと思いますけど。videoとかだったらアリでしょうけど。 URLバーって書いたけどAppleの呼称は URL text field です。 Safari Web Content Guide これの iOS 7 版ってどこだろう。 Chrome
Memo, iOS 6 + Standalone mode + Full screen 指定だとGPS(Geolocation)が使えない
iOS 6 の地図の出来の悪さはご承知の通り。 それで、Web版Google MapをiPhoneのホーム画面に登録して代わりに使いましょ、なネタがネットで拡散してました。 そのネットで流れていたコードでホーム画面に登録したGoogle Mapを起動するとGPSが使えないというエラーが表示されます。 Googleの公式Mapサイトをホーム画面に登録したものだとエラーが出ません。 違いは一つだけ、headにフルスクリーンの指定が入っているかどうかだけです。 このホーム画面から起動した時はStandalone modeになりSafariを起動して見ている時と区別されています。 自分でも試してみました。 確かに、meta name="apple-mobile-web-app-capable" content="yes"が記述されているとGPSが使えません。 window.navigator.ge
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
iOS Safari(mobile Safari)には「ホーム画面に追加」機能があります。 「ホーム画面に追加」に追加したアイコンをタップして起動させた場合はmetaタグを追加でフルスクリーン表示が可能です。 描画エンジンはSafariの様なのですが通常（のSafari）とは違う表示が可能です。 ステータスバーもロケションバーもないアプリのようなフルスクリーン表示が可能です。 <meta name="viewport" content="width=device-width , initial-scale=1.0 , maximum-scale=1.0 , user-scalable=no"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-m
Canvas始めました – 読込んだ画像の一部をキャプチャしてPNG書出し
画像の一部をキャプチャして書き出すの巻。 画像の書出しは以前も行いました。 使用メソッドはcanvas.toDataURLです。 CanvasElementのメソッドで画像変換が可能なのですが、一部だけを画像にするオプションは用意されていないようです。 それで、書出し用のcanvasを別に用意しそこへキャプチャした画像を表示させるようにしています。 クロップ領域を表す破線矩形はマウスに追随します。 書出し用のボタンを配置しています。 どちらもマウスアクションにより操作するのですが、前回Canvas上で表示させて苦労したので今回はHTMLElemntで作成しCanvas上にのっけています。 Canvas上の画像の一部を複製書出し HTML <canvas id="canvas" width="600" height="400" style="background: #fff"></canva
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas始めました – 塗りパターン : createPattern