Safari 18.0リリース — 最注目のView Transitions APIなど、Web開発者向けの機能を一挙紹介
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
モバイル向けWebページでiFrameを使用する際のスクロール問題 | infoScoop開発者ブログ
infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。 サポートブラウザ 今回サポート対象となったブラウザ（OS）は以下になります。 Safari（iOS） Android Browser（Android） IE（Windowsタブレット） DOCTYPE宣言 HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。 <!DOCTYPE HTML> 現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。 また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。 なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。 iOSのiFrameにお
iPhone、iPod touchなどでフォントサイズが変わる対応方法 – ヒビヅレ
最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。 そんなスマホ対応していてiPhone（正確にはiPod touch）で確認してみたら特定のエリアだけ文字サイズが妙に大きくなっている現象があり、ちょっと（実際にはかなり）ハマったので備忘録的メモ。 メディアクエリを使ってウィンドウサイズによってスタイルシートを分けてるんですが、PC環境とiPhoneを縦で見ると問題ないのに何故か横にした時だけフォントが大きくなるという現象が発生。 cssを色々書き換えてもどうしても直らずレイアウトから変えなきゃいかんのか…と悩んでいたら、どうやらiPhoneでは自動でフォントサイズを調整してくれる機能があるらしいです。で、それを解除するにはCSSのbodyにでも以下を加えるだけ。 -webkit-text-size-adjust: none; これで無事解決。 でもAn
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
iPhoneビューを最適化するプラグイン「WPtouch」のcssをカスタマイズして2つの画像を横に並べて表示する方法。 | AppBank
WordPress のiPhone Safariからの閲覧を最適化してくれる「WPtouch」というプラグインを利用して、WordPressのiPhoneビューを作っている方は非常に多いかと思いますが、先ほどAppBankでちょっと手を入れたのでそのご紹介。 スクリーンショットの大きさによって画面内ががたがたになっていて見にくかったので、CSSをちょっと手直ししたところPCでの閲覧とほぼ同じ状態にできました。特に2つの画像を横に並べてきれいに表示したい！と思われている方はこの方法で解決できると思います。紹介します。 WPtouchのCSSカスタマイズ事例 さて、「WPtouch」を入れると下記のような閲覧画面になります。 WPtouchは月ごとに日付の部分のアイコンの色が変わったり、コメントが付いていればコメントの件数を記事一覧ページに表示してくれたりと、非常にすぐれたiPhoneビューを
CSSiPhone — Screens for all your iPhone needs.
why the iPhone? Creative mobile web design is here, and it can be tough searching the web for inspiration when you need some. You never know if a site has a mobile [iPhone] alternative, and if they do you either have to use your phone to find it, or take a stab at what the sub-domain is: m, iphone, mobile, ect.. CSSiphone.com is dedicated to helping you find your iPhone inspiration. about this sit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する