0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【豆知識】meta name での警告が発生!非推奨?

Last updated at Posted at 2024-09-22

はじめに

今回は、開発者ツールに表示されたエラーではなく警告?が表示されていたので調べてみました

Image from Gyazo

なんかPleaseされてるけど??どういう意味なのか?:rolling_eyes:

環境

  • Windows, WSL
  • Docker
  • Ruby 3.2.3
  • Rails 7.1.3

そもそもmeta nameの部分が何か?

👆上記2つの記事が実際の画面もあり分かりやすかったです。

ざっとまとめると以下の通り

  • ウェブアプリケーションがモバイルデバイス上で「フルスクリーン」モードで動作することを示すメタタグ。
  • このタグがあることで、ユーザーがウェブアプリを「ホーム画面」に追加したときに、アプリがブラウザのUI要素(アドレスバーやナビゲーションバーなど)を表示せず、よりアプリっぽいインターフェースで表示される
  • ポイントは次の3つ。フルスクリーン表示ユーザー体験の向上PWA(Progressive Web App)対応

修正方法

では早速app/views/layouts/application.html.erb(またはメタタグが含まれているファイル)を開いて、以下のように変更していきます。

<!-- 旧 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 新 -->
<meta name="mobile-web-app-capable" content="yes">

さいごにまとめ

少しコードを修正することで、その後再読み込みすることで無事に警告は解消されました!
エラーではないけど、警告が表示されると少し焦りますね💦
今回の記事が何か参考になれば幸いです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?