ganbaruzo
@ganbaruzo

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

pc上の書籍のhtmlをコードを、edge開発者ツールを利用して、ユーザーエージェント文字列で自分のスマホ(au SonyXperiaz5(Anroid5.5→Anroid7.0)に表示したい

解決したいこと

edge、右クリック、開発者ツールで調査する、コンソールをクリック
const ua = navigator.userAgent;
underfiend
ua
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36 Edg/106.0.1370.47'
↑①
レスポンシブ↓、編集、カスタムデバイスの追加

デバイス、カスタムデバイスの追加、デバイス、zibun、ユーザーエージェント文字列、'Mzilla/5.0~'①をコピーして貼り付け、追加

zibunにチェックにして、選択して、リロードをクリックしたんですが、自分のスマホに表示されません。スマホが古いためレスポンシブに対応していないのでしょうか?
初心者なので、色々調べたのですが分かりません。大変お手数ですが、どなたか分かる方、教えて頂けでしょうか?長文で大変、失礼します。

例)
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。

発生している問題・エラー

出ているエラーメッセージを入力

例)

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップquiita質問写真20221022.png

該当するソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECTION 225:スマートフォンでの表示を設定する</title>
<style>
body { margin: 0; }
h1 {
  box-sizing: border-box;
  padding: 100px 20px;
  width: 375px;
  font-size: 24px;
  text-align: center;
  color: white;
  background: olive;
}
</style>
</head>
<body>

<h1>幅375pxのボックスです</h1>

</body>
</html>

例)

def greet
  puts Hello World
end

自分で試したこと

ネット検索

0

3Answer

どこからどう調べたらそういう認識になるのか分からないのですが,
レスポンシブは別に規格名称ではないし,Edgeの当該項目はただのエミュレータなので実機にページが映ることはありません.

ともかく識者からすれば「ナニヲイッテイルンダー」状態なので,用語くらいはちゃんと調べ直すことをおすすめします.

PC上のファイルにアクセスするにはいくつか方法はありますが,
Node.jsか何かでLANにWebサーバを立てるのが一番楽だと思います.

0Like

Comments

  1. @ganbaruzo

    Questioner

    有難うございます。edgeで、ユーザーエージェント文字列 追加 スマホ 表示されない、検索、https://lpeg.info/webworks/user_agent.html、このサイトと、ユーザーエジェント文字列、追加、検索、https://hayakute.kantan-sakusaku.com/?p=3487、この2つのサイトを参考にしました。スマホ表示レスポンシブ↓、編集、カスタムデバイスの追加、デバイス、カスタムデバイスの追加、デバイス、zibun、ユーザーエージェント文字列、'Mzilla/5.0~'①をコピーして貼り付け、追加したら、出来るのでは思ってしました。レスポンシブ対応はIPad,Air~Pixel2などの表示されものでしか、出来ないのですね。Node.jsか何かでLANにWebサーバを立てるのが一番楽だと思います、はまだ分かりませんが、後々分かればいいかなーって感じです。リンク表示が全部にかかってすみません。
  2. その2つのどの辺を見てスマホ実機で表示できるとお思いになったのでしょうか???
    ドキュメントに書いてないことを脳内補完するのは実際プログラミングでやられると致命的なのでおやめください.

    >レスポンシブ対応はIPad,Air~Pixel2などの表示されものでしか、出来ないのですね。

    ちゃんと調べてればそんな意味不明な言葉も出てこないんですけどね…
  3. @ganbaruzo

    Questioner

    出来るのでは思ってしました。意味不明でも、初心者なので、そこらを突っ込んで、来ると、ちょと、悲しいです。
  4. 一応書いておきますと,現代Webページ設計において「UA文字列をもとにUIを変更する」手法はほぼ使われなくなってきています.

    あらゆるデバイスに向けた可変レイアウト設計を行うのがレスポンシブデザインであり,現代では主にCSSやその機能であるメディアクエリを用いて実現されています.
    これを統一的にクラス化し実装可能にしたフレームワークが,巷に聞く「Bootstrap」です.
  5. @ganbaruzo

    Questioner

    ありがとうございます。まだまだ勉強が足りません。日々、精進ですねー。

This answer has been deleted for violation of our Terms of Service.

本当にうまくいくのでしょうか?提案されたプロセスは正しいようですが、私のやり方が間違っているような気がします。もしかしたら、手順を間違えたのでしょうか?私の側では正しい情報が表示されないのです。

0Like

Comments

  1. @ganbaruzo

    Questioner

    有難うございます。自分もスマホに表示されませんでした。

Your answer might help someone💌