appleの最新版iOSは11。また、多くの流通デバイスはiOS10以上がほとんどで、iOS9以下は今やレガシーブラウザです。js、css3を使うと不具合が多発するので、注意しましょう。 クロスブラウザを条件にする場合も、iOSは10以上としておいた方が無難でしょう。逆に言うと、先方クライアントが昔のipadやiphoneを使っている場合は確認トラブルになりやすいので、事前確認をしっかりしておくことが大事です。 iOS9以前とiOS10以降では、ブラウザ仕様にかなりの差があるので、WEB制作においては、きちんと明確な線引きをしておく必要があります。 詳しくは、こちらの記事様が参考になります。 ▼iOS 10にアップデートできるiPhone・iPad一覧 http://www.appbank.net/2016/06/14/iphone-application/1216095.php ▼iOS
[iPhone] iOS6からの新機能!iPhone Safariで表示したページのデバッグがすんごく楽になるWebkit Webインスペクタがスゴい こんにちは、 iPhone5が発売されましたね!!iOS6も使えるようになりましたね(*´∇`*) どんどん便利になっていく感じにウキウキしている@yoheiMuneです。 今日は、iOS6のSafariから利用可能となったWebkit Webインスペクタという、 神がかり的なWebデバッグツール。仕事場の方から聞いて、すんごく驚いたので、ブログでも紹介したいと思います。 Webkit Webインスペクタとは Webkit Webインスペクタとは、ChromeとかSafariとかに付属している開発ツールで、 表示中のWebページや実行したJS、CSSの内容を閲覧、編集などが出来る便利なツールです。 HTML,CSS,JavaScriptを用
私が好むと好まざるとに関わらず、誰もが私のWebアプリをiOS9の搭載されたiPhone 6SやNexus 6Pで、超高速Wifiに接続して使っているわけではありません。 現実は甘くありません。3Gでの接続や、古いハードウェアも珍しくありません。Googleのレポートによれば、 Androidのアクティブユーザは14億人 だそうです。彼らの多くは間違いなく、最先端ではないハードウェアを使っていることでしょう。 Androidのパフォーマンスについての Jeff Atwood氏の最近の記事 などを読んだことがあるなら、モバイルWebには希望がないように感じるかもしれませんね。 その記事からいくつか注目すべき文を引用します。 端的に言えば、今日最も高速なAndroidデバイスとして知られているものでも、新しいiPhone 6Sよりも5倍遅く、2012年代のiPhone 5上のEmberに比べて
この問題はiOS10にて解決いたしました。 今日Javascriptを書いていた時にiOS9で処理が遅延するelementがいたので、記事に起こしてみた。 見ていただいたほうが早いと思うので、githubpagesでサンプルを公開してみた。 検証コードは末尾にあります。 this is fixed と this is absolute は同じクラス名で同じループ処理(forEach)です。 Gifアニメによる再現 キャプチャによる再現 下までスクロールし指を離さず上に上がってきてください。 描画後 真っ白である。 スクロールしていくと スクロール時 いくつかのelementが現れる。 display noneになる 特定位置までいくと検証用のelementが display:noneで消される 上にスクロールする absoluteなelementはみえるが、fixedなelementは見え
モバイルサイトのマークアップをする際に、ある位置を超えるとヘッダーなどの要素を固定するという仕様はよくあると思います。 その際にpositionのabsoluteとfixedを切り替えて使うと思いますが、iOSの仕様でスクロール中はz-indexの値が無視されるバグが存在しています。 そのせいで、positionの値を切り替える一瞬z−indexが無視されて一度消えたようになります。 これを解消する方法として、切り替えたい要素をGPUレンダリングに変えるという手があります。 .elem { transform: translateZ(0); // もしくはtranslate3d(0,0,0) position: absolute; } .elem.fixed { position: fixed; } transform: translateZ(0);もしくはtransform: trans
BabelとWebPackを使ってES6からブラウザで動く環境を作るための登壇資料。半分ライブコーディング的に動かしているので、スライドだけだと少々わかりにくいかもしれません。 ※ 後日LIGブログで記事にするかもですRead less
こんにちは!ちょうど1ヶ月前に子供が生まれ、忙しくも楽しく日々を過ごしている安達(@ry0_adachi)です🍼🍼🍼 今回は「コネヒト Advent Calendar 2017」の7日目の記事として、WebViewで使われる機能をReact+Fluxの構成で実装してリリースした時の辛かったことと、それをどうやって解決したか?について書いていきます。 qiita.com やりたいこと この3つをクリアすればOKです。 Android/iOS両方のWebView上で動作すること アプリの対応OSバージョン(iOS9〜/Android4.1〜)で動作すること アプリの中でも違和感を与えないような動作を実装すること Polyfillがいろいろ必要になる これはAndroid4系のWebViewがまだChromeベースでないバージョンまでがほとんどの原因かな?という気もしますが結構な頻度でクラ
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能(OSX版含む) CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
ざっくり見て行きましょう。 ローカルファイルの読み込みがやっと可能に iOS 8ではwebViewへ表示できるコンテンツはネット上のもの、もしくはインラインのHTMLのみでした。 iOS 9になりようやくローカルのファイルを読むことが可能になりました。 - (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL; // WKWebView.h:101 データとしても読み込めます。 - (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName ba
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く