iPhoneシリーズの画面解像度とファーストビューのサイズ - console.lealog();
何度調べても忘れるのでメモ。 iOS7の場合を追加！ 画面解像度 iPhone3G: 320*480 iPhone4/4S: 640*960 iPhone5/5S/5C: 640*1136 ヨコ*タテ です。 いわゆるファーストビュー iOS6まで iPhone3G: 320*416 iPhone4/4S: 320*416 iPhone5/5S/5C: 320*504 iOS7から iPhone4/4S: 320*372 iPhone5/5S/5C: 320*460 ※ロケーションバーが出てるパターン ※`scrollTop`でロケーションバーが消せなくなったのでiOS6より狭くなった ふう。 372pxじゃなんもできませんぜー。
iOS9でviewportのinitial-scaleが無効になる時の対策
iOS8とiOS9とでブラウザの表示が違う 先日のブログ記事をiPhone6で見ると中身が左に寄るんだけど…と言われて見てみたのですが、自分のiPhone6では異常ありませんでした。 OSバージョンを確かめながらキャプチャで見比べました。 寄ってますね。 長いコードの部分で、iOS8.4.1では横スクロールが表示されます。 viewport設定でinitial-scale=1.0が無視されているっぽい iOS9のSafariでは、初期の画面倍率を無視してページ全体を表示するよう縮小して表示しているようです。 ios9 (β) viewportに不具合か！？ ios 9 Safari / Web App Viewport Problem (expands to fit all elements in view) 同じように困っている報告も上がっています。 回避策 先ほどのスレッドでも紹介され
[ヅ] 強く押しすぎて iPhone 6s にヒビが入ってしまった(・∀・)!! (Force Touch / 3D Touch) (2015-10-01)
というネタ的な Web ページを作ってみた。 iPhone 6s (Plus) の Force Touch (3D Touch) 機能を使ったネタ的なサンプル。 ⇒ Force Touch (3D Touch) sample (音が鳴るので注意) iPhone 6s (Plus) + Safari でページを表示して、空の画像を強く押しこんでから離すと、 画面が割れたような画像が表示されてガシャーンて音が鳴るだけ。 Force Touch とは何か Force Touch は Apple の開発した感圧タッチパネル技術のこと。 3月10日のアップル Spring Forward スペシャルイベントで発表された Apple Watch と新MacBook はまるで別ジャンルの製品ですが、新技術「感圧タッチ (Force Touch)」を採用した共通点があります。 アップル、次期 iPhone
![[ヅ] 強く押しすぎて iPhone 6s にヒビが入ってしまった(・∀・)!! (Force Touch / 3D Touch) (2015-10-01)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a14797158356423dd9428859519b124a97b93db5/height=288;version=1;width=512/http%3A%2F%2Fwww.nilab.info%2Ff%2F0%2F20110915_regza_crash_397587604.jpg)
iOS 9 Mobile Safari was enabled force touch event - Qiita
iPhone 6s と force touch event iPhone 6s から ForceTouchEvent が利用可能になりました。 機能を体感できる 簡単なお絵かきデモ を作成しました。 iPhone 6s の Safari でアクセスし、指で画面をなぞってみてください。 Demo Code デモのコードはこのようになります。 <!DOCTYPE html><html><head><title>ForceTouch Event demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> html, body, ul { margin: 0; padding: 0; } canva
iOS 8.4.1の:hover問題
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO
こんにちは、清田です。 WWDCの中で、次世代のSafari 8で「CSS Shapes and Compositiong」がサポートされたとのことで、 今回はCSS Shapesについてご紹介してみたいと思います。 CSS Shapesとは？ CSS ShapesのShapeは形を意味します。 CSSのプロパティから指定した任意の形状(Shape)に合わせて、レイアウトすることを可能にしたスタイルになります。 表現できる形は、丸、三角形、台形など簡単図形の描画や画像を形状として認識できるようです。 ブラウザの対応状況 以下の対応表を確認してみると、Safari 8から対応したのが確認できます。 導入方法について まず前提条件として、CSS Shapesを描画できるブラウザであることがあります。 基本的なでスタイルを反映方法は、従来の指定方法と同じようにdom要素に任意のid or cls
![[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/34de6d57437c5cfc77b749f99e4483a7a1702539/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fios81.png)
iOS7のsafariでonresizeが効かない？
フルスクリーンの背景画像を使用したサイトで、iOS7の画面回転時の表示が崩れるので直してほしいとの依頼。 レスポンシブではない普通のPCサイトなので、本来ならそのまま画面に収まるよう伸縮して表示されるはずなのだけど、 なるほど画面の向きを変える度に要素のサイズがガタガタになって、どんどん崩れていく。 背景画像関係のjsを見てみたら、一部省略するけど中身はだいたいこんな感じ。 function hoge() { var obj = document.getElementById("bgimg"); winWidth = window.innerWidth; winHeight = window.innerHeight; if(winWidth > winHeight){ obj.style.width = winWidth + "px"; obj.style.height = "auto";
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
