- 締切済み
スマートフォンの画像サイズ
スマートフォンのデザインを640pxで制作し、スマートフォンサイトを構築中です。 viewport の設定を <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> とし、画像を640pxで制作したサイズで切り出していますが スマートフォンで実機確認すると、縮小されず、倍のサイズで表示されてしまいます。 幅640pxで作成したデータを、半分に縮小したもの（320px）を画像として切り出すのが正しい方法なのか、それとも、切り出した画像の<img … width=" 半分のサイズ ">にするのでしょうか？ それとも、幅640px で作成した画像を切り出して、自動的に縮小されるようにする方法があるのでしょうか？ いろいろ調べたのですが、よくわからず（調べ方も分からず…）困っています。 無知で申し訳ないのですが、よろしくお願いいたします。
- maikonyan3
- お礼率97% (90/92)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- unacyo
- ベストアンサー率51% (35/68)
推測で申し訳ないですが、スマホのブラウザの設定で、ページの自動調整という設定があります。(私のはAndroid2.3の標準ブラウザ) これをOFFにしたら原寸で表示されませんか？
関連するQ&A
- 画像の表示をリキッドにする方法
android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。 画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
- ベストアンサー
- HTML
- スマートフォンの画面サイズに合わせてページを表示
スマートフォンの画面サイズに合わせてページを表示させるために「viewport」 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 上記のタグを使用したのですが、iPhoneの場合は大丈夫なんですけれど、アンドロイドの場合、スクリーンサイズよりも大きく表示されてしまい困っています。 この「viewport」のタグを<head>～</head>内に入れるだけではダメなのでしょうか？ webでの検索で探し方が悪いのか「viewport」の紹介してあるページにしかたどりつけていません、こちら以外の方法もあるのでしょうか？ もし解決方法をご存知の方がいましたら解答お願いします。
- ベストアンサー
- その他（プログラミング・開発）
- iPhoneサイトのフォームを拡大したら戻らない
スマートフォン向けサイトのHTMLをコーディングしています。 会員登録フォームのページです。 フォーム欄に入力しようとすると、自動的にページが拡大されます。 一度拡大されてしまうと、一旦ページを落として再度開かないと縮小できません。 そのため、拡大された状態なので画面が左右にぶれてしまい、 下方向への操作がしづらくなります。 ユーザーにタッチして縮小してもらう他方法はないでしょうか？ ちなみにメタタグに以下のように記述しました。 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.5, minimum-scale=1.0, "> user-scalable=noとすると拡大はしないのですが、 フォームの入力欄が小さすぎて見づらくなります。 HTMLは横幅を指定しないグリッドレイアウトです。 CSSはfont-size: 10pt; 他はフォームの横幅を最大200pxに指定している程度の シンプルなページです。
- ベストアンサー
- HTML
- スマートフォンサイト デザイン
初歩的な質問失礼いたします。 現在、スマートフォンサイトを制作しようとしているのですが、キャンバスサイズで迷っています。 すべての要素を倍のサイズで作成して、cssで縮小するときいたのですが、 iphone5の画面サイズを基準にデザインデータを作りたい場合、解像度は640×1136pxですが、実際に画面に表示されるのは半分程度の大きさなので、すでに倍になっていると考えて、幅640pxのキャンバス（高さはのちのち足すつもりです）を作成したらいいのでしょうか？ また、ランドスケープ時のために、幅1136pxのキャンバスを作成したほうがいいのでしょうか？？ どなたか教えてくださいませんか？？
- ベストアンサー
- CSS
- タグを入れてるのにスマホ用サイズで表示されない
スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもＰＣサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか？
- 締切済み
- CSS
- スマートフォン制作の画像サイズについて
近年、あまりにもサイズが多様化している スマートフォンの画像サイズについて、お聞かせください。 この度、写真をスライドさせるUIをスマートフォンでつくる予定です。 これまでのスマートフォン制作では640pxで主に画像を作っておりました。 ただ、現状、スマートフォンの解像度が多様化しているので いったい、今の主流としてサイズはいくつで作るのが ベストなのかな…と毎回、悩んでおります。 Portrait、Landscape両方に対応予定です。 小さくしても、写真画像なので大きな劣化はないことは承知しているのですが、 写真の上に文字も少し載せる画像になります。 通信が重くならず、あまり劣化が気にならないサイズについて アドバイスをいただけたら助かります。 スマートフォンサイトの制作について お詳しい方、よろしかったら、ご教授いただけたらと思います。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像メインの１カラムのリキッドデザインができません
画像をメインにした１カラムのリキッドデザインを作成したいのですが、画像の縦横比が崩れて縦長になりながら可変してしまいます。どのようにcssを設定したらよろしいでしょうか？いろいろ検索したりしましたが、うまくできません。 また、こちらの質問機能じたい初めてさせていただいています。至らないことがあるかもしれませんが、ぜひともよろしくお願い致します。急ぎで解決したいです。＾＾； ---------------- <html> <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes,initial-scale=1.0"/> <link rel="stylesheet" href="css/a3.css" type="text/css" > <title></title> </head> <body> <div id="wall" > <div id="box"> <img src="css/images/main.jpg"> </div> </div> <div id="footer"><img src="css/images/foot.jpg"></div> </body> --------------------------- body{ width:100%; height:100px; max-height:720px; } #wall{ display:block; width:100%; height:100%; margin:0 auto; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; background-image:url(images/G1.jpg); background-size: 100% 100%; } #box{ width:100%; height:100%; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; } #footer { width:100%; margin:0 auto; min-width:720px; min-height:35px; max-width:1440px; max-height:70px; }
- ベストアンサー
- CSS
- ジオシティーズ 横幅 広告のサイズになる
ジオシティーズでＨＰを作っているのですが <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" /> を入れているのに、 スマホで表示するサイズが 広告のサイズより小さくなりません。 <div id="main"> にたしいて #main{ width: 200px; } としているのですが、添付画像の様になってしまいます。 広告に合わせて作るしかないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- androidのviewport設定
スマホのサイトを作ってみて、いまいち理解できない部分があったので、 教えてください。 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,target-densitydpi=medium-dpi" /> 上記設定で、ヘッダーとフッターがwidth:100%（各内部も%で要素の幅指定）、コンテンツ（section）が320px幅（各内部もpxで要素の幅指定）のサイトを作りました。 これで、だいたいのページでは縦の時320px、横にしたとき、コンテンツはそのままセンター、ヘッダーとフッターが伸びて表示される具合になったのですが、 よくわからなかったのが、アンドロイドの挙動です。 アンドロイドも縦横同じように（ただし、iphone画面をそのまま拡大したような）表示はしていたのですが、 一部ページで縦の時、コンテンツ左右に余白が発生してしまいました。 （コンテンツ自体は画面いっぱい、画面外に余白が発生、ヘッダーとフッターは余白含んだ幅いっぱいで表示） 見た目上は320pxに収まっていましたが、コンテンツが320px幅からはみ出ている可能性のあるページだったので、 要素にoverflow:hidden;をかけましたが特に変化ありません。 アンドロイドの自動計算かと思うのですが、 コンテンツの幅を確認しなおす他に、 見直したほうが良い箇所があればご教授頂けると嬉しいです。 （viewportが正直自信ありません・・・）
- 締切済み
- HTML
- html css スマートフォン作成方法について
html cssを使って、スマートフォンサイトのトップページを作成しています。 と言っても超がつく程の素人で、htmlもcssもhp作成等、経験した事がありませんでした。 訳あってスマートフォンサイトを作る事になり、htmlとcssの入門編のような参考書とネットで調べて、四苦八苦で試しております。 htmlとcssで作成し、一応はPCで見れるようにはなりましたが、スマートフォン用に変換する時に初期画面が、上手く画面に収まらない状態になります。 調べた結果、<head>の中に<meta name="viewport" content="width=device-width,……>というので指定すると、画面に収まるようになると記してあり、色々試した結果全然変わりませんでした。 user-scalable=yesにすると、最初の画面が大きく表示され、タップするとぴったりのサイズになりました。noにすると勿論ですが大きいままです。 最初から、画面サイズはぴったりに、ユーザーに拡大させないように作りたいのですが…。 全体の幅は640pxで作ってありまして、画像部分に引っ張られて全体が大きく表示されている感じがします。 htmlで、tableを組んでそこにボタン等の画像を埋めこんでいるせいなのかもとも思いました。 下記のソースで、ページ上部のhead部分にtableを組んでロゴとテキストを置いています。 <div id="header"> <table bgcolor="#ff0000" border="0" width="640px"> <tr> <td><img src="img/rogo.png" alt=ああああああ></td> <td valign="bottom" align="center"> <h3>あああああああああ</h3></td> </tr> </table> </div> ロゴの画像は幅255×80です。 その下に、幅640pxのメインになる画像をそのまま置いています。 さらに、その下には下記のように、またtableを組んで、横２列のボタンを画像で置いてます。 <div id="menu"> <table align="center"> <tr> <td><a href="img/aaaaa.html"><img src="img/ボタン1.png" style="border-style:none;" /></a></td> <td><a href="img/bbbbb.html"><img src="img/ボタン2.png" style="border-style:none;" /></a></td> </tr> </table> </div> ボタンのサイズは310×80pxです。 <div>タグでグループ化してcss幅の設定しても上手く表示されず…。 ネットで調べてみても、次々新しい言語でパンク状態で…。自分の頭の悪さに飽きれてしまいます。勉強はかなり必要なのは覚悟していますが、とりあえずはなんとか、今スマートフォンでぴったりに表示させたいです。 とても質問内容が解りずらく、お見苦しいのですが、どなたかアドバイスを頂けないでしょうか。とても困っています…。
- 締切済み
- Android
