webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応

      2020/11/12

今回は、WordPress(4.9などの新しいバージョン)の管理画面で、エラー判定されているCSSが発見されたので対応してみます。 ポイントになるのは、デバイスに応じた表示に使われる『viewport』や『ベンダープレフィックス』でした。さっそくみていきます。

viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件

写真は、管理人が運営している、フリー曲サイト(WordPressで構築)です。テーマ編集時のCSSの画面で、×マークが出て警告となっています。内容は、viewport(表示領域・デバイスにあわせたいときはwidth=device-widthと書く)に『ベンダープレフィックスついているところ(webkitやmoz・msのブラウザごとにviewport指定)』という部分です。 ここを、WordPressがエラー判定しているようです。

なお、PHPプログラムのエラーとは異なり『赤マークが出るエラーでも、崩れるCSSでない限りは、サイトは普通に見ることができる』という状態でした。PHPプログラムのエラーだと、画面が真っ白になってサイトがみれないなどの、致命的なケースになることがあります。 (おそらく、ヘッダーにくっついていたviewportが機能していたから、こちらでエラーしたのを上書きみたいになっていたかもしれません)

wordpressエラー判定がでていた、viewportベンダープレフィックスを直す

1:viewportのベンダープレフィックスをカットし、シンプルに書く

ベンダープレフィックスをカットし、シンプルに書きました。最近のモダンブラウザですと、ベンダープレフィックスがなくてもきちんと表示できることがあります(管理人が検証したところ、IEでも10~11くらいになると対応できていました)。

ただし(致命的エラーではなく、注意として)、長さ・比率・コンテンツサイズが期待されてるのに、みたいな表示がでます。

2:head内メタタグにmeta name="viewport" content="width=device-width"

header.phpなどで、head内メタタグにviewportが出るようにするという方法があります。これをやる場合はCSSのほうを(重複するので)カットしました。 書き方は・・・ 『meta name="viewport" content="width=device-width, initial-scale=1"』 という形にしました。

CSSには書いていないですが、縦型デバイス『ios6~・android』などでの対応が可能でした。今回はこの案を採用します。

ベンダープレフィックス・viewportに関する、資料となるサイト・あとがき

今回のwpがエラー判定していたCSSを直すにあたって、参考にしてみたサイトについても、お知らせいたします。

そのベンダープレフィックス、いつまでつけてるの? https://qiita.com/amamamaou/items/42197e443134478befaf (qiitaにあったコラムです。ベンダープレフィックス、なくても大丈夫なケースなど。)

レスポンシブ ウェブデザインの基本 https://developers.google.com/web/fundamentals/design-and-ux/responsive/ (head内meta viewport タグに、ビューポートを設定する、という項目があります)

ベンダープレフィックスがなくても大丈夫な例や、viewport機能なども押さえることができました。理屈がわかっていると、必要な機能をつけつつ、シンプルな記述・かつエラー回避などもできると思います。とくに『viewport』に関しては、スマホやPCなどのデバイスごと表示に関しても大事になってきます。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...