高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
10/25追記: Application Loaderの後継となる公式アプリとして、TransporterがMac App Storeに公開されました。 Transporter Apple開発ツール無料apps.apple.com これで安泰ですね。 Xcode 11がMac App Storeからもダウンロードできるようになりました。既にアップデートした方もいるかと思います。 さて、世の中にはXcode本体を使わずにApp Store Connectにipaファイルをアップロードする方法を何とかして見つけないといけない、ちょっと辛い状況を抱えた人々が存在します。Xcodeでのアップロードが上手くいかなかったり、サードパーティの開発ツールからipaファイルを直接与えられてしまったりと、事情は様々ですが、そういった人たちはこれまで、Application Loaderを使うのが一般的でした。
iOSではスクロールバーが表示されません。 通常のブラウジングでは無意識でWebサイトは縦にスクロールできるものだと思っているので通常は問題になることはないのですが、 ユーザーに明示的にスクロールできると認識させるときにこの仕様が障害になることがあります。 今回はiOSでもスクロールができるということをユーザーに認識させるために、 強制的にスクロールバーを表示させる方法を紹介します。 html <div class="scroll-wrap"> <table> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入り
Hello Expo developers. We’ve got some updates in the works, including some major changes to our Expo Client app for iOS. Specifically, when you want to test your local Expo project on a device, you’ll no longer be able to open a QR code scanner to do so. We’re also removing the ability to preview projects published by other Expo accounts besides your own. Your workflow probably won’t change much,
IMPORTANT: iOS 11.3 final version is now published. Check my updated article on the topic: Progressive Web Apps on iOS are hereAfter the surprise yesterday from a tweet from Ricky Mondello and then the Safari 11.1 beta Release Notes stating that Web App Manifest and Service Workers are implemented which means multi-platform PWAs are now possible, it’s now time to come back to the real world and se
AppleもiOS/macOSをProgressive Web Apps（PWA）対応へ。次のSafari 11.1でService Workerなど実装 Appleが、iOSとmacOSの次バージョンにバンドルされるSafari 11.1で、Progressive Web Apps（PWA）の重要な構成要素であるService Workerをサポートすることが分かりました。次のiOSとmacOSのバージョンはiOS 11.3/macOS 10.13.4で、現在ベータ版としてAppleが開発中です。 PWAとは、HTML、CSS、JavaScriptなどのWeb技術によって開発されるWebアプリケーションの一種です。Webサーバから配信されて実行されるだけでなく、リソースをローカルに保存しオフラインでの実行にも対応。Service Workerによるバックグラウンド処理やプッシュ通知なども
iPhone(iOS11)の写真フォーマットはJPEGからHEIFへ。仕様&元に戻す方法 2017 9/22 ※本記事の最後に新iPhone（8/X） or iOS11にアップデートしたiPhone 7以降で「おもいでばこ」を利用する際の設定のお願いについてまとめていますので、「おもいでばこ」ユーザーの方はご確認ください。 こんにちは、「おもいでばこ」のマーケティング＆製品企画担当の根本です。先日、iPhoneの新モデルが発表、iOS11がリリース、そして本日iPhone 8が発売されましたが、おもいでばこチームは絶えず研究開発/動作検証を行っています。 写真や動画データに深く関わりのある「おもいでばこ」ですが、今回の新iPhone＆iOS11はそんな「おもいでばこ」にとっても影響の大きい、新しい写真や動画形式の追加という重大な変更が行われています。そこで、「おもいでばこ」の開発現場から、
どうも。麦芽系エンジニアasmzです。今年もあっという間に年の瀬になってまいりましたが、こないだコストコでのどごし生を大量補給したので、年内は何とかやっていけると思います！ CircleCIでのiOSビルドが有料化！？ これまでCircleCIでiOSアプリのビルドをされていた方はご存知かと思いますが、これまで「ベータ機能」として無料で利用できていたiOSビルド機能は、11月末でベータ提供終了とのお知らせが先日CircleCIから届きました。 で、12月から新しいプランになりますよ！って出てきたプランを見ると、無料プランというものは見当たらず、最安でも$99/月（ベータ機能利用者は今申し込めば限定価格でご提供）という噂…。（※） ※この辺はまだ公式サイトにアナウンス掲載されていないので、今後変更される可能性はあります。（もし違っても石投げないでやってください…） 少々お高いですなぁ… その
あると思った？ 残念、そんなものはない！ とはいえそれは"厳密に"やる場合の話で、今現在はなんとか・・なんとか・・・。 これを良しとするかはあなたのココロ次第です。 以下、奮闘記をお送りいたします。 20150813: 更新 ‘fullscreenEnabled’ in documentってすればもしかして(iOSのみ) https://github.com/uupaa/UserAgent.js こういうのもあるらしい 20150422: 更新 まさかのiOSのLINEアプリのWebViewのUAが変わったらしく、FacebookとLINEが判別できるように！ 20150407: 更新 まさかのiOSのTwitterアプリのWebViewのUAが変わったらしく、もうFacebookしか判別できないみたいです・・。 先に結論を書いておくと、現時点でiOSに限ってであればなんとかなります。 た
iOSでウェブサイトをフルスクリーン表示させる方法をメモしておきます。言葉で説明するより、画面を見てもらうのが早いと思います。 iPhoneのSafariで、ウェブサイトを閲覧すると、通常は、上図左のような画面になりますが、上図右のような画面表示にするための方法です。Safariのアドレスバーや、ナビゲーションバーが表示されませんので、使える場面は限られますが、以下のような使い方ができるのではないでしょうか。 Google Maps等のFull JavaScriptのWebアプリを広いスクリーンで表示するいわゆるハイブリッドアプリ（ネイティブアプリ中身がHTML）を作る過程での簡易確認制御ボタンもHTMLで作って、Webアプリだけど、ネイティブアプリっぽく見せる1. と 3. は、ほぼ同義ですね。既に存在しているWebアプリを広い画面で使うか、自分で作るかの違いです。 Google Map
このエントリの賞味期限は iOS 9 登場までです。
New minimal UI mode and old bugs on Safari by Maximiliano Firtman Twitter @firt About Newsletter Published 11 years ago (13 Apr 2014) About 6 min reading time #ios #safari #homescreen webapp As you might know, iOS 7.0 included one of the buggiest browsers of all time for iPhones and iPads. After 5 months we have now the 7.1 update that wants to give some fresh air to web developers. Let’s see if
前: ボタンの左右位置次: 雪・科学館・おゆうぎ会 iOS の position:fixed バグ回避方法 2014-01-26 17:32:32 コンピュータ お手伝いしている仕事で、バッドノウハウばかりが溜まっていく気がする… デザイン上の都合で、CSS で position:fixed が使われていた。 テキスト入力を促す箇所で、画面の真ん中に入力窓が出てくる。 まぁ、ネットではよく見るインターフェイスです。 ところが、これは iOS では「使ってはならない」技だった。 バグ報告があり、たまたまバグが出た個所が僕の担当箇所だったので僕が調べることに。 でも、プログラムのバグではなく、iOS のバグだと判明。 position:fixed では、ページをスクロールさせても、ウィンドウに対して常に同じ位置に要素を表示できる。 常に同じ、というとスクロールさせるのをサボるだけで難しくな
2本指ドラッグ 2本指ドラッグを発生させようとする位置にポインタを置きます。 Optionキーを押したままにします。 指でタッチする位置を表す円を、開始位置に移動します。 Shiftキーを押したまま、円を目的の中心位置まで移動してからShiftキー を放すことにより、ピンチターゲットの中心点を移動します。 Shiftキーとマウスボタンを押したまま、ドラッグしたい方向に円を描 くように動かした後、Shiftキーとマウスボタンを離します。 ピンチ ピンチを発生させようとする位置にポインタを置きます。 Optionキーを押したままにします。 指でタッチする位置を表す円を、開始位置に移動します。 Shiftキーを押したまま、円を目的の中心位置まで移動してからShiftキー を放すことにより、ピンチターゲットの中心点を移動します。 マウスボタンを押したまま、
PCやスマホとかのWebサイトに対してA/Bテストやる方法は結構いろいろありますね。 有名どころだと optimizely とか、最近だと planBCD とか。 iPhoneとかAndroidとか、ネイティブアプリとかたくさん作っている時代ですし、同じことはどうやってるのか。 ストアにリリースした後に検証・分析できるようなフレームワークやサービスがすでにあるのか。 ちょっと調べてみました。 調べ始め さくっとググってひっかかったものは Quora How do companies practically A/B Test new versions of native mobile apps that are already in production? Qiita SkyLabを利用したiOSアプリケーションのABテスト 海外の記事 Roundup: A/B Testing Soluti
DeNA中の人が解説する「マンガボックス」システム構成とiOSアプリの内部構成 #DeNA #iOS #Android 2014.05.14 Category：技術コラム Tag：Android ,DeNA ,iOS DeNAが配信している「マンガボックス」は、プロの作家による30作品以上のマンガが連載されている無料のマンガ雑誌アプリです。 2014年3月には300万ダウンロードを達成し、毎日5～6作品づつ更新され続けている人気アプリ「マンガボックス」のシステム構成から、iOSアプリの内部構成、その他開発に関する話題について、DeNAの松前健太郎さんに寄稿していただきました。 by 馬場美由紀 （CodeIQ中の人） マンガボックスとは マンガボックスは、2013年12月よりiOSとAndroid向けのアプリが公開され、2014年3月には300万ダウンロードを達成しました。プロの作家による
先日、TestFlightのAndroidサポート終了、Appleによる買収といったニュースが世間を騒がせましたが、皆さんテストアプリの配信はどうしていますか？ KLabでは自社製のテストアプリ配信ツール「EMLauncher」を使用しているのですが、せっかくなのでOSSとして公開することにしました。 https://github.com/KLab/emlauncher 今すぐ試す 今すぐ試したい方のために、セットアップ済みのAWS EC2イメージを用意しました。 ami-9b295f9a EMLauncher Sample インスタンスを起動後、設定ファイルのAWSアカウント情報を編集し、S3のバケットを作成してください。 (設定の詳細はconfigディレクトリのサンプルをご覧ください) /home/ohoflight/emlauncher/config/emlauncher_confi
米Appleは9月10日（現地時間）、次期モバイルOS「iOS 7」を9月18日に公開すると発表した。アップデートできる現行端末は以下の画像の通りだ。 iPhone 4とiPad 2以外は、9月18日にダウンロードできる（この2機種の具体的なアップデート期日はまだ不明）。 iOS 7は同日発表された「iPhone 5s」に搭載される64ビットの新プロセッサ「A7」に最適化されているが、もちろん32ビット互換だ。2010年発売のiPhone 4もサポートするのはかなり良心的だが、当然利用できない機能もある。 AppleのiOS 7のページで明らかにしている、機種によって利用できないiOS 7の機能をまとめてみた。表では利用できる機能に○が付いている。iPad 2は全滅だが、この表にあるもの以外の新機能は使えるということだ。なお、表中の「iPod touch」は「iPod touch 第5世代
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
