Q&A
width の変更はお試しになりましたか？
実現したいこと
Webアプリケーションを作成している中で、PCで表示されている管理者の画面（後述）をスマートフォンでも同様に、デザインが崩れることなく縮小されている状態で表示できるように実装したいと考えています。
前提
- WEBアプリケーションには管理者の画面と、利用者の画面が存在する。
- 利用者の画面は、レスポンシブ対応が必要なため、viewportのmetaタグを設定する必要がある。
- 管理者画面は、現状の開発優先度の観点からレスポンシブ対応は行わない。
発生している問題・エラーメッセージ
- 上述のような、実装を低コストで実施できる方法が思い当たらない。
- 表示する画面に応じて、metaタグの有無を制御したり、viewportのinitialScaleの値を動的に変更したりすることができない。(react-helmetの利用？)
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="robots" content="noindex" /> 7 <title>Sample</title> 8 </head> 9 <body> 10 <noscript>You need to enable JavaScript to run this app.</noscript> 11 <div id="root"></div> 12 </body> 13 <script type="module" src="/src/index.tsx"></script> 14</html>
試したこと
- viewportのinitialScaleを0.5-0.6に設定する。
→ 利用者画面の表示が小さくなってしまう。
2. viewportを削除する。
→ 利用者画面がレスポンシブ対応を実現できない。
補足情報（FW/ツールのバージョンなど）
- 使用技術・フレームワーク
HTML/TypeScript/React
ご質問いただきまして誠にありがとうございます。widhtの変更も行ったのですが、
>利用者の画面は、レスポンシブ対応が必要なため、viewportのmetaタグを設定する必要がある。
こちらの要件を満たしていないため、採用できずにおりました。
回答1件
あなたの回答
tips
プレビュー
