中国語版Chromeブラウザでは12 px以下のフォントのソリューションはサポートされていません
4517 ワード
中国語版Chromeブラウザでは12 px以下のフォントのソリューションはサポートされていません
Chrome 27以前の中国語版デスクトップブラウザでは、ページの最小サイズが12 pxであることがデフォルト設定されていたが、英語版では制限されていなかった.実際のプロジェクトでは、数字/英語のコンテンツについて、他のフォントのテキストをより小さな文字で表示する必要がある場合があります.この場合、ブラウザの自動調整機能をキャンセルする必要があります.
一般的な解決策は、Web kitブラウザの構成を禁止し、Webページのフォントサイズを調整することです.以下のCSS定義方式:
さらにtext-size-adjustプロパティについて説明します.このプロパティは、デバイス(ブラウザ)に基づいて表示サイズを自動的に調整するかどうかを設定するために使用されます.safari 3.0+、chrome 1.0+でサポートできます.属性の値は、次の3つになります.
percentage:フォント表示のサイズ;auto:デフォルトでは、フォントサイズはデバイス/ブラウザによって自動的に調整されます.none:フォントサイズは自動的に調整されません
この属性は当初はiPhone版safari向けに設計されており、一般ページのiPhone端末でのフォントの表示問題を自動的に調整するために使われていたというが、webkitのプライベート属性である以上、現在ではwebkitカーネルのデスクトップブラウザ制限ページでもよく使われている
.実際、これはwebkitのバグです.最新版のChromeでは修復されています.
不合理な使用-webkit-text-size-adjust:noneは多くの悪い影響を及ぼすことに注意してください.例えばグローバル属性として定義すると、Chromeではユーザが縮小ページを拡大(PC上でCtrlスクロール可能なマウスホイールを押してページを拡大)すると、文字は縮小せずに定義された大きさを維持し、ユーザにあまり友好的ではない体験を与える.html{-webkit-text-size-adjust:none;事を済ます.
-o-text-size-adjustがないため、このようなCSSプロパティは、Operaでは、ツール->プリファレンス->高度->フォント->最小フォントサイズ(ピクセル)を手動で設定するしかありません.
PCデスクトップ版Chrome 27は-webkit-text-size-adjust属性のサポートを正式にキャンセルし、実際には既存のバグを修正した.このプロパティをChromeデバッグウィンドウで定義すると、Unknown property nameが表示され、すべての番号が最小12 pxになります.でも、
モバイル側chrome/safariは現在も-webkit-text-size-adjustプロパティをサポートしています.この属性の乱用はwebkitカーネルのブラウザの調節能力を失うため、視覚障害のある閲覧者にとって非常に友好的ではない(特にモバイル端末)が、今どのようにして元の需要を実現すればいいのだろうか.
テキスト領域に以下のスタイルをローカルに適用することで解決できます.
12×0.75=9で、他のブラウザでは12 px以下の文字数が認識できますが、ここではChromeブラウザのスケールのみが必要です.しかし、SafariかChromeかをどう見分けるかは、まだ有効なCSS hackがありません.javascriptでChromeかどうかを判断できます.判断方法:var isChrome=!!window.chrome;Chromeとして検出されると、chrome_adjustというクラスは対応するラベルに追加されます.
しかし、問題はまだ解決されていない.3つのブラウザで異なるWebページを表示します.
1)、Chromeの下でズームが有効になっているため、文字間隔に問題が発生し、美観に影響を与える.この場合、完璧を追求すれば、jsがChromeと判断した後、CSS属性letter-spacingで修復することを考えるかもしれない.2)、Firefoxは-webkitを知らないので、正常に表現し、9 px;
3)、Opera 12.5+認識可能-webkit-接頭辞(Opera 12.15バージョン、カーネルはしばらくwebkitに交換されていないが、すでに-webkit-接頭辞を認識できるようになっており、また要素チェック時に接頭辞も抹消されている)が、12 px以下の文字を表示できるようになり、結果として9になった×0.75は、肉眼の認識に影響を及ぼし、このときoperaに-o-transform:scale(1)を追加しなければならない.この属性.
実はノルウェー出身のOperaは一貫して自分のエンジン(Presto)を使っているが、いわゆる「互換性の問題」を引き起こすことが多い.
WebKitを最適化するウェブサイトが増えている中、Operaの対策は、開発者がウェブ属性の選択によってOpera機能の発揮に影響を与えないように、WebKitエンジンのプレフィックス属性を導入することである.Opera 12.50は、-webkit-linear-gradient、-o-linear-gradientの2つの異なるタイプを含むWebkitプロパティをサポートする最初のデスクトップブラウザになります.モバイルバージョンでも同様のコアが使用されます.関連テストの開発者は、シミュレータOpera Mobile Emulator、Windows、Linux、Macのバージョンをダウンロードできます.
仇童靴の言葉を引用してまとめます.
-webkit-text-size-adjustの本職はmobileに使用されます.規範を参照してください.
CSS Mobile Text Size Adjustment Module Level 1(アクセスhttp://dev.w3.org/csswg/css-size-adjust/)
Apple開発コミュニティのSafari Web Content Guide(アクセス)http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)
現在のデスクトップ版webkitブラウザが彼をサポートしているのは、実際にはバグだからだ.
Bug 56543–CSS property"-webkit-text-size-adjust"means different things in Safari and iOS(アクセス)https://bugs.webkit.org/show_bug.cgi?id=56543)
このバグは最新版のWebKit Nightly Buildsで修復されました.
このプロパティの現在の一般的な用途は、iPhoneがハードスクリーンからクロススクリーンに移行するときに文字を拡大することを防止することです(viewportがmaximum-scale=1.0文字を設定しても拡大します).
iPhoneとiPadのデフォルト設定は違います.
iPhoneデフォルト設定-webkit-text-size-adjust:auto;
iPadデフォルト設定-webkit-text-size-adjust:none;
iPadのデフォルトは調整されていません
この属性はパーセンテージもサポートされており、現在のデスクトップ版のwebkitブラウザではサポートされていないため、iPhoneの横棒画面を切り替えたくない場合は文字を調整し、-webkit-text-size-adjust:100%を使用します.
絶対に-webkit-text-size-adjust:none;これにより、-webkit-text-size-adjust:noneがサポートされます.のデスクトップ版のwebkitブラウザは、文字サイズを拡大する法人がなく、可用性に深刻な影響を及ぼしています.
最後にまとめます:www webサイトに対して、-webkit-text-size-adjust属性を使用する必要はありません.デスクトップ版の画面空間が比較的大きいため、12 pxは大部分の需要場所を満たし、12 px以下のフォントに設定する必要はありません.特別な需要がない限り.携帯電話などのモバイル端末のwebページでは,webkitブラウザが12 px未満のフォント設定をサポートしているため,ブラウザは依然としてこの属性のサポートを保持しているが,我々はまったく使用する必要はない.
だから結論は、-webkit-text-size-adjustを使う必要がある場合は、必ず-webkit-text-size-adjust:100%と書くことです.この書き方はmobile版のみサポートされているため(本人iOSではsafari/chromeがテストに合格している)、Chrome 27+や他の低バージョンのデスクトップ版webkitブラウザは、認識されず、noneが視覚障害者ユーザーに縮小できないという負の影響もありません.
Chrome 27以前の中国語版デスクトップブラウザでは、ページの最小サイズが12 pxであることがデフォルト設定されていたが、英語版では制限されていなかった.実際のプロジェクトでは、数字/英語のコンテンツについて、他のフォントのテキストをより小さな文字で表示する必要がある場合があります.この場合、ブラウザの自動調整機能をキャンセルする必要があります.
一般的な解決策は、Web kitブラウザの構成を禁止し、Webページのフォントサイズを調整することです.以下のCSS定義方式:
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }さらにtext-size-adjustプロパティについて説明します.このプロパティは、デバイス(ブラウザ)に基づいて表示サイズを自動的に調整するかどうかを設定するために使用されます.safari 3.0+、chrome 1.0+でサポートできます.属性の値は、次の3つになります.
percentage:フォント表示のサイズ;auto:デフォルトでは、フォントサイズはデバイス/ブラウザによって自動的に調整されます.none:フォントサイズは自動的に調整されません
この属性は当初はiPhone版safari向けに設計されており、一般ページのiPhone端末でのフォントの表示問題を自動的に調整するために使われていたというが、webkitのプライベート属性である以上、現在ではwebkitカーネルのデスクトップブラウザ制限ページでもよく使われている
.実際、これはwebkitのバグです.最新版のChromeでは修復されています.
不合理な使用-webkit-text-size-adjust:noneは多くの悪い影響を及ぼすことに注意してください.例えばグローバル属性として定義すると、Chromeではユーザが縮小ページを拡大(PC上でCtrlスクロール可能なマウスホイールを押してページを拡大)すると、文字は縮小せずに定義された大きさを維持し、ユーザにあまり友好的ではない体験を与える.html{-webkit-text-size-adjust:none;事を済ます.
-o-text-size-adjustがないため、このようなCSSプロパティは、Operaでは、ツール->プリファレンス->高度->フォント->最小フォントサイズ(ピクセル)を手動で設定するしかありません.
PCデスクトップ版Chrome 27は-webkit-text-size-adjust属性のサポートを正式にキャンセルし、実際には既存のバグを修正した.このプロパティをChromeデバッグウィンドウで定義すると、Unknown property nameが表示され、すべての番号が最小12 pxになります.でも、
モバイル側chrome/safariは現在も-webkit-text-size-adjustプロパティをサポートしています.この属性の乱用はwebkitカーネルのブラウザの調節能力を失うため、視覚障害のある閲覧者にとって非常に友好的ではない(特にモバイル端末)が、今どのようにして元の需要を実現すればいいのだろうか.
テキスト領域に以下のスタイルをローカルに適用することで解決できます.
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
}12×0.75=9で、他のブラウザでは12 px以下の文字数が認識できますが、ここではChromeブラウザのスケールのみが必要です.しかし、SafariかChromeかをどう見分けるかは、まだ有効なCSS hackがありません.javascriptでChromeかどうかを判断できます.判断方法:var isChrome=!!window.chrome;Chromeとして検出されると、chrome_adjustというクラスは対応するラベルに追加されます.
しかし、問題はまだ解決されていない.3つのブラウザで異なるWebページを表示します.
1)、Chromeの下でズームが有効になっているため、文字間隔に問題が発生し、美観に影響を与える.この場合、完璧を追求すれば、jsがChromeと判断した後、CSS属性letter-spacingで修復することを考えるかもしれない.2)、Firefoxは-webkitを知らないので、正常に表現し、9 px;
3)、Opera 12.5+認識可能-webkit-接頭辞(Opera 12.15バージョン、カーネルはしばらくwebkitに交換されていないが、すでに-webkit-接頭辞を認識できるようになっており、また要素チェック時に接頭辞も抹消されている)が、12 px以下の文字を表示できるようになり、結果として9になった×0.75は、肉眼の認識に影響を及ぼし、このときoperaに-o-transform:scale(1)を追加しなければならない.この属性.
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1); // -webkit opera browser
}実はノルウェー出身のOperaは一貫して自分のエンジン(Presto)を使っているが、いわゆる「互換性の問題」を引き起こすことが多い.
WebKitを最適化するウェブサイトが増えている中、Operaの対策は、開発者がウェブ属性の選択によってOpera機能の発揮に影響を与えないように、WebKitエンジンのプレフィックス属性を導入することである.Opera 12.50は、-webkit-linear-gradient、-o-linear-gradientの2つの異なるタイプを含むWebkitプロパティをサポートする最初のデスクトップブラウザになります.モバイルバージョンでも同様のコアが使用されます.関連テストの開発者は、シミュレータOpera Mobile Emulator、Windows、Linux、Macのバージョンをダウンロードできます.
仇童靴の言葉を引用してまとめます.
-webkit-text-size-adjustの本職はmobileに使用されます.規範を参照してください.
CSS Mobile Text Size Adjustment Module Level 1(アクセスhttp://dev.w3.org/csswg/css-size-adjust/)
Apple開発コミュニティのSafari Web Content Guide(アクセス)http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)
現在のデスクトップ版webkitブラウザが彼をサポートしているのは、実際にはバグだからだ.
Bug 56543–CSS property"-webkit-text-size-adjust"means different things in Safari and iOS(アクセス)https://bugs.webkit.org/show_bug.cgi?id=56543)
このバグは最新版のWebKit Nightly Buildsで修復されました.
このプロパティの現在の一般的な用途は、iPhoneがハードスクリーンからクロススクリーンに移行するときに文字を拡大することを防止することです(viewportがmaximum-scale=1.0文字を設定しても拡大します).
iPhoneとiPadのデフォルト設定は違います.
iPhoneデフォルト設定-webkit-text-size-adjust:auto;
iPadデフォルト設定-webkit-text-size-adjust:none;
iPadのデフォルトは調整されていません
この属性はパーセンテージもサポートされており、現在のデスクトップ版のwebkitブラウザではサポートされていないため、iPhoneの横棒画面を切り替えたくない場合は文字を調整し、-webkit-text-size-adjust:100%を使用します.
絶対に-webkit-text-size-adjust:none;これにより、-webkit-text-size-adjust:noneがサポートされます.のデスクトップ版のwebkitブラウザは、文字サイズを拡大する法人がなく、可用性に深刻な影響を及ぼしています.
最後にまとめます:www webサイトに対して、-webkit-text-size-adjust属性を使用する必要はありません.デスクトップ版の画面空間が比較的大きいため、12 pxは大部分の需要場所を満たし、12 px以下のフォントに設定する必要はありません.特別な需要がない限り.携帯電話などのモバイル端末のwebページでは,webkitブラウザが12 px未満のフォント設定をサポートしているため,ブラウザは依然としてこの属性のサポートを保持しているが,我々はまったく使用する必要はない.
だから結論は、-webkit-text-size-adjustを使う必要がある場合は、必ず-webkit-text-size-adjust:100%と書くことです.この書き方はmobile版のみサポートされているため(本人iOSではsafari/chromeがテストに合格している)、Chrome 27+や他の低バージョンのデスクトップ版webkitブラウザは、認識されず、noneが視覚障害者ユーザーに縮小できないという負の影響もありません.