[iOS 17] 太くなったfont-weightを以前のiOSに揃える方法
W8iOS 16以前の場合、font-weight: normalはW3で表示され、iOS 17からはW5で表示されるようになったため、これまでと比べて太くなった。 font-family: sans-serifを指定している場合font-family: sans-serifを指定している場合は、どういうフォントが指定されるのか。これは HTML によって変わる。 <html lang="en">の場合は、「San Francisco」が適用されるため、iOS 17でnormal（400）指定の文字が太字にはならない。一方で<html lang="ja">の場合は、「Hiragino Sans」が適用されるため、iOS 17でnormal（400）指定の文字が太字になってしまう。 解決方法新旧のiOSでフォントの太さを整える方法として、以下の3つが考えられる。 font-weightを変更
![[iOS 17] 太くなったfont-weightを以前のiOSに揃える方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/355eeebdd0af8b85690dd7c4682bc3ecead21f29/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F202401160018.png%3Fts%3D7a31584a47b813aaea48967f34098f53a730c5ba)
Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)
UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it. html, body { overscroll-behavior-y: none; } Safari however does not support it … UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webk
iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ
iOS Safari 8, 9, 10 では overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると 要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき …つまり、バウンスが発動しようとしてfixedで阻止された瞬間に 画面が数秒間フリーズする不具合があります。 いろいろ試しましたが、行き着いた回避策は2つ fixedを諦める overflow-scrolling: touch;の慣性スクロールを諦める いずれかでした。 なぜこのようなことになったか、という余談ですが まず、ヘッダとフッタを固定表示し、真ん中の領域をスクロールさせる設計のウェブサイトがありました。 そして、iOS Safariの仕様として 最後までスクロールし、さらにスクロールしようとした際には、バウンスが発動し
合字とCSS | 株式会社 エヴォワークス -EVOWORX-
先日、某案件で題字にletter-spacing:0.2emを指定したところ、 ChromeとSafariで表示が違っていました。 cssは以下の通りです。 font-family: "Noto Sans Japanese"; // https://fonts.googleapis.com/earlyaccess/notosansjapanese.css letter-spacing: 0.2em; Chrome Safari SafariでProfileの「f」と「i」の表示が近い。 このような「ft」「fi」「fl」など、くっついた文字を「合字」と言います。 恥ずかしながら、知りませんでした。 合字については、書体デザイナーの小林章氏のブログが詳しく、面白かったです。 デザインの現場 タイプディレクターの眼 合字（１） デザインの現場 タイプディレクターの眼 合字（２） デザインの現場
iOSでfixed要素の背景がツールバーの高さ分 消える件 | SKYGUILD
スマホ（iOS）のバグ?のお話です。 いつもこの問題に直面するのですが、検索しても出てこないので書いてみます。 ※2017/01/11時点、検証可能な範囲 iOS8.4 〜 10.2で発生を確認。 モーダルウィンドウなどを実装する時に、ブラウザ全面に背景色を引いたfixed要素を置くことはよくありますよね。 iOSにおいて、ツールバーが一度出た状態からスクロールして、ツールバーが消える時にこの高さ分（よりやや多め） 背景が消えてしまう問題があります。 文章で説明してもよくわからないと思うので、以下をご覧ください。 数秒以内に正しい状態に治るので大きな問題ではないのですが、割と気になります。 解決方法としては、fixed要素には背景をつけず、背景用のabsolute要素を別に配置する、となります。 発生状態のコードと、解決後のコードを解説します。 バグ発生状態のコード デモはこちらから ※i
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を利用するケースは少ないので使わ
Ratchet
Build mobile apps with simple HTML‚ CSS‚ and JS components. Download Ratchet Currently v2.0.2 Tweet Follow @GoRatchet Code licensed under the MIT License and the docs are licensed under CC BY 3.0. Ratchet was lovingly crafted by Connor Sears. Currently v2.0.2 · Issues · Releases · Legacy v1.0.2 Docs
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
Pixate
Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move
overflow時に惰性スクロールを有効にする | mawatari.jp
以下のようなCSSを組むと、iframe風のボックスを作ることができます。中のコンテンツがオーバーフローするときには、それをスクロールさせることができます。
iPhone、iPadでのoverflow:scroll/autoの動作について - SUSH-i LOG
ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad（iPhone）の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさ
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
iScroll4でネイティブに近いスマホ向けHTMLページを作成する
こんにちは。松田です。 スマホ向けにネイティブに近い動作をするHTMLページを作成しようとした時、必ずぶつかるのがヘッダーの動作の扱いです。 特にiOS向けに処理を書く場合、iOS5では実装されているposition:fixed;がiOS4では動作しないため、iOS4でCSSのみでヘッダーを固定することが難しくなっています。 そんな時につかえるのがiScroll4です。iScrollではJavaScriptの動作によりヘッダーの固定を行う処理が行われます。 http://cubiq.org/iscroll-4 上記のサイトからDOWNLOADボタンを押すとtar.gz形式のファイルがダウンロードされます。 examplesディレクトリにたくさんサンプルが入っているので見てみると良いかもしれません。 特に使えそうなのが、lite、pull-to-refresh、carousel、あたりです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to fix popup's scrolling on Safari
iOS overflow-x (or position absolute) makes scrolling choppy?
_level0 | Kayac Interactive Designer's Blog