AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも ｜ SEOモード
AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ
Google Chromeのブレークポイント
Google Chromeのブレークポイント Google ChromeのデバッグツールにはJavaScriptの処理を一時停止させることができるブレークポイントという機能があるので利用方法を解説いたします。 まずは基本的な使い方から。ブレークポイントを利用したいページでデベロッパーツールを開き「Sources」タブを表示し、左メニューのSourcesタブを選択し、ブレークポイントを利用したいファイルを開きます。 次に一時停止させたいコードの行番号をクリックすると、行番号に青いマークが付きます。その後、スクリプトを実行するとJavaScriptのスクリプトがその行で停止します。 (ステップオーバー)のアイコンをクリックすると処理が1行づつ実行されます(正確にはちょっと違うけど)。 操作内容をアニメーションGifにしてみたのでご確認ください。 このようにコードを1行づつ実行し、現在の状態やソ
もうFireFoxの出番と言わせない！Google ChromeでUser-Agentを偽装する方法
FireFoxさようなら～！ User Agent偽装のためだけにFireFoxを利用していたなら、そうなるでしょうw (FireFoxならプラグインを入れるだけで、UserAgentの偽装ができるからね） 今日は、Google ChromeでUser Agentを偽装する方法を教えます。 User Agentとは いちおう、User Agentの説明を。 User-Agentとは、HTTPリクエスト中に含まれるヘッダの中に入っている情報です。何かページを表示する度に、あなたの端末はUser-Agentをサーバーに送っています。 まぁ、こんなことはどうでもいいのですが、要するに、 多くのサイトではコンテンツを表示する際、このUser-Agentを見て、 これはPC用、 これはスマホ用、 これはガラケー用 と判別してページを表示しています。 なので、 表示するコンテンツを切り替えたい場合、U
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
[Sass / Compass] ソースマップをChromeで見られるようにしたい « きんくまデザイン
こんにちは。きんくまです。 アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。 さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。 そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。 で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。 ところでソースマップって？ ここでソースマップとは何かを説明します。 まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。 この
User-Agent Strings - Chrome for Developers
With Privacy Sandbox, an origin trial is in progress for reduced User-Agent strings, designed to remove sensitive information which may be used for fingerprinting. A browser's User-Agent string (UA) helps identify which browser is being used, what version, and on which operating system. When feature detection APIs are not available, use the UA to customize behavior or content to specific browser v
[Google Chrome]拡張編(20)スマートフォン・シュミレーター「User-Agent Switcher」でiPhone/iPad表示
「iPhoneなどのスマートフォンやiPadのタブレット端末で、このブログはどのように見えるのだろう？」と思ったことありませんか？ブログ運営者は気になるところです。そこでGgoogle Chorme拡張機能「User-Agent Switcher」なら、iPhoneやiPadだけでなく様々なモバイル端末で、様々なブログやサイトがどのように表示されているかをPC上で確認できます。その使い方とは？ サイトやブログ運営には欠かせないスマートフォン最適化などのモバイル表示対策ですが、我がブログ「Webと人のアマモ場」でも、 WPをiPhoneやアンドロイド・スマートフォンに最適化するプラグインWPtouchの使い方とKtai Styleとの併用法「WPtouch Pro」無料版から有料版に変えた理由とは？購入と導入手順についてなどの記事に紹介している通り、モバイルサイト最適化に取り組んできました。
![[Google Chrome]拡張編(20)スマートフォン・シュミレーター「User-Agent Switcher」でiPhone/iPad表示](https://cdn-ak-scissors.b.st-hatena.com/image/square/57b04b19e4e795b5b469de3b184eb2875adb3cfd/height=288;version=1;width=512/https%3A%2F%2Fwww.amamoba.com%2Fwp-content%2Fuploads%2F2015%2F04%2Fimage_thumb1610.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2013/09/chromefirefoxcsscss.html