![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.2ベストアンサー
- 回答日時:
パターンがいくつかあって、
製作者側の設定もあるし、ユーザー側の端末やブラウザ・設定による事もあります。
制作者側の仕様や設定は、#1さんの考えだけど、
スマホを想定していなかった場合は、縮小されて全体が表示される場合もあるし、アップされた一部(左上部)しか表示されないパターンもあります。
固定幅やレスポンシブ、viewportや-webkit-text-size-adjustだったり各々の制作方法によります。
制作者の意図や考えも違いますので、コンテンツによってはどちらが良いとは言えない(好みや利便性)事もあります。
ユーザー側だと、iPhoneやAndroidなどの違いもあるし、
ユーザーの設定によってPC版表示もできますし・・・
スマホに限らず、タブレットでも違うようになりますよ。
スマホ用といっても、別々のファイルを作って振り分けるパターンと、同じファイルをCSSで違う見え方にしているパターンもあります。
ご回答ありがとうございました。なるほど、色んなパターンがあるんですね…
Webは面白いですが、奥が深いです。もっと勉強していきます><
色々とありがとうございます!
今後も質問を投稿する機会があるかと思いますが、また見かけたらどうぞよろしくお願いいたします。
No.1
- 回答日時:
>スマホ用のサイトがない場合はそのように表示されるものですか?
ここは重要なので先に説明しておきます。
HTMLでウェブページを作成する最大の、そして唯一の目的は
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる
・・・【中略】・・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
お分かりのように、スマホ用にページを作ることは、最初から間違っている。このHTML4.01の勧告(1999年)の16年経っていますから、スマホやタブレット、ガラケーはむろんですが、ここに書かれていない印刷機、点字端末、テレビ、そして検索エンジンまで、すべてをたった一つの文書で完結するのがHTMLの目的なのです。
では、なぜスマホで小さく表示されてしまうかというのは、スマホはディスプレイが小さいために、上記の対策がされていないページを見ると、横に大きくスクロールしないと読めなくなってしまいます。一行読むごとに右左にスクロールしてたら面倒ですし、それが他の動作---ページをめくるとかになっても困りますから、縮小して表示するようにされているのです。
ずばり「どんな環境からもWebの情報を利用できるよう」にされていないページは縮小して最低限読めるようにしてある。虫眼鏡を併用してでも(^^)
具体的には、980pxより広いデザインのページは、その1/3程度の例えば320pxまで縮小するようになっている。---スマホやブラウザの機能---
制作側からですと、コンピューターに指示(mete)すればよい。<head></head>内に、
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.6">
とか指定して、0.6より小さくならないようにする。
★もちろん、それ以前の問題として
1) ページはリキッド---ウィンドウ幅に追随して横幅が変化すること・・・何もしてなければHTMLはそもそもそのようにできている。
2) media-typeでスタイルを切り替える。(HTML4.01の機能)
印刷が想定されるページなら印刷用のスタイルシート(media="print")、携帯電話なども想定するなら(media="handheld")、視覚弱者用にスクリーンリーダー用media="speak,aural"や展示端末用media="embossed"まで用意するかも
3) 特定のサイズ以下ではデザインそのものを変更する。(HTML5,CSS3)
メディア別スタイルシートの拡張でmedia queryと呼ばれます。
@media screen and (max-width: 760px) {}
@media screen and (max-width: 480px) {...}
@media screen and (max-width: 320px) {...}
とか、
>webサイトで、スマホで見るとパソコンで見た時より縮小されてるような形で表示されることが多いんですが、
素人がおつくりになっている。しかたなくブラウザが縮めて表示している。
>スマホ用のサイトがない場合はそのように表示されるものですか?
スマホ用の対策がされていない。
スマホ用と言って別のもの作ってはなりません。
詳しく書いていただきありがとうございます。
一部まだ理解できていないところがあるのですが(頭が悪いもので…;;)、何度も読み返して勉強させていただきます。
参考になりました。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- デスクトップパソコン PC作成のスマート対応フアイルへの転換 1 2022/06/18 19:50
- 写真・ビデオ スマホで撮影した写真(JPEG)をパソコン(Win10)で見ると、撮影した写真が添付のような表示にな 3 2022/04/29 14:46
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- セキュリティホール・脆弱性 前職(個人クリニック)のWebサイトを見ようとするとアクセス拒否。と表示されます。 揉めてお互い気持 3 2022/04/11 10:47
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Google Maps Googleマップ 複数端末で同一アカウントを使っているのにパソコンでのみ表示が異なる 1 2022/07/16 21:03
- Android(アンドロイド) Amazonのサイトを日本語表示に戻したい 1 2022/06/17 09:31
- アプリ スマホ画面のホーム位置にカメラアプリを表示させるには 1 2022/11/07 06:26
- ホームページ作成・プログラミング メールフォームで送信すると「通信に失敗しました。ページの再読み込みを...」で送信できません。 2 2023/05/26 18:11
- Chrome(クローム) Chromeは何で進むボタンが無いの? 1 2023/05/14 20:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホでPCサイト見たらスマホ...
-
PC用サイトと携帯用サイトの運...
-
HTMLからフォルダを開きたい
-
googleドライブで、PDFファイル...
-
iPadの標準ブラウザでローカルH...
-
Dreamweaverでページ全体が文字...
-
作成したイメージマップが反応...
-
インラインフレームの中に表示...
-
htmlファイルの表示が真っ白
-
台東区上野近くのボーリング場
-
社内で利用するWebサイトを立ち...
-
borderでa:hover下線表示させる...
-
タイトルバーを非表示にできま...
-
form action="#"
-
css ,videotタグ。ホームページ...
-
HTMLページが勝手にダウンロー...
-
ホームページでファイルをダウ...
-
URLを変えないで表示する方法
-
Dreamweaverでソースが文字化け...
-
どのページもすべて同じURLなの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ、iPadやiPhoneで...
-
リンクの下線は消すのが普通?
-
ホームページを作っているので...
-
ガラケーサイトの一般的な画面...
-
WEB会社に勤めている方に質...
-
スマホ横幅が720px だけ 横が...
-
画面は固定と可変のどちらがい...
-
デジタルフィルタの伝達関数
-
DOMとHTMLの本
-
コーディング代行について
-
PCサイトとは何ですか。
-
スマートフォン用のサイト作成...
-
Windowsホームページ作成MACで...
-
Webサイトを作成する前のイメー...
-
iphone/android WEB制作について
-
Safariで、ボタンが丸くなるの...
-
レスポンシブwebデザインでのIE...
-
平均的なウィンドウサイズとは?
-
厳しいご意見を下さい!
-
バリアフリーなサイトで、フレ...
おすすめ情報