AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも ｜ SEOモード
AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ
overflowではみ出た要素がクリッカブルになってしまうAndroid 4標準ブラウザのバグ - 下林明正のブログ
Android 4標準ブラウザのバグっぽいのを見つけた。 overflow: autoではみ出した要素は見えないようにして その中でposition: relativeなリンクを宣言して はみ出て見えなくなっているそのリンクをタップすると、本来ならばタップできないはずなのに、貫通してタップできてしまう というバグっぽいものをAndroid 4.1.2のシミュレーターで確認した。 別の書き方(overflow: hiddenとか)でも起こるかもしれない。 Android 4.1.2以外のAndroid端末でも起こるかもしれない(Android 2.3.3シミュレーターの標準ブラウザでoverthrow.jsを使ってoverflow: auto動くようにした状態だと問題は起こらなかった)。 再現するHTML <html> <head> </head> <body> <div id="flood
【Android】Chromeでフォントサイズが大きくなるバグ | 電脳備忘録
あるサイトをコーディングしたのですがAndroidのchromeで確認したところ、サイトの一部のみフォントサイズが大きくなっていました。 さて困ったとしらべたところこちらにまとめられていました。 AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ to-R どうやら「metaにinitial-scaleを指定しないとfont-sizeがでっかくなるバグ」にひっかかったようです。 該当要素に「max-height: 999999px;」を設定したところ無事バグを回避することができました。 翻訳元のページに「Chrome on android」ってあったのでどうやらandroid版Chrome固有のバグっぽいですね。GalaxySⅡのandroidブラウザではこの現象は発生しませんでした。 なんかAndroidのブラウザが（バグの多さという意味で）IE化しているよ
Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ | kanonjiのブログ
Android4系のデフォルトブラウザで、どうしてもレイアウトが崩れるという話を持ちかけられて、調べてみました。 どうもviewportを指定してない場合に、widthがdevice-widthより大きな値を指定しても、無視されるというものみたいです。 widthが効かないというのがどういう事か、文章だとよくわからないと思うので、再現させるコードと、それを表示したスクリーンショットを下の方に載せてます。 解決策 なにが起きるかと言うと、 p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。 androidのバージョンによって変わるみたいで、 android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。 いろいろやってみて、 なぜかbackground-colorを入れると意図した幅で表示された。 なんでbackground-c
translateプロパティでAndroid,iPhone端末で画像がちらつく件
あ、ども僕です。 最近、何かとスライダー的なやつを扱う機会が増えております。 よくあるスライダーですね。 こんな感じのやつですね。 画像がスーっと行くやつ。バナーなんかで良く見かけますよね。 これをスマフォンサイトでも実装しているのですが、マークアップは単純に <div class="slider"> <ul class="sliderLi"> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> <li><img src="yes.jpg" alt="no"></li> </ul> </div> こんな感じだったりします。 liの親要素であるulに-webkit-transform:translate(-350px,0px);などで 動かしてスライドしているかの様に実装するのですが、 スライ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
