質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

28826閲覧

ウィンドウの最小サイズを指定してそれ以上小さくできないようにする方法

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/01/30 09:33

###前提・実現したいこと
Webページのウィンドウのサイズを指定してそれ以上小さいウィンドウで
表示される時はスクロールバーではなく全体を縮小させて表示させるには
どうしたらよいのでしょうか。

レスポンシブの最小サイズを幅378pxにした場合
それ以下の幅320pxのデバイスで表示させると
幅378pxのデザインが全体的に縮小されて表示される
また、
PCなどウィンドウサイズを小さくできるデバイスでは
378以上ウィンドウが小さくできないといったイメージです。

###試したこと

CSS

1body{min-width:375px;}

この表記ではうまくいきませんでした・・・。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

「378以上ウィンドウが小さくできない」の例に出されているサイトもFirefoxで見た場合それ以下に出来ます。

また、JavaScriptでのウィンドウサイズの変更は制限があります。

【window.resizeBy - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/resizeBy

下記例について、ウィンドウサイズは制限できませんが、描画エリアのサイズは数値どおりになっているはずです。(横スクロールが発生するはず)

CSS

1body{ 2 min-width:5555px; 3 background-color: #fff; 4} 5```**動くサンプル:**[https://jsfiddle.net/8x65601h/](https://jsfiddle.net/8x65601h/) 6 7--- 8 9 10> レスポンシブの最小サイズを幅378pxにした場合 11それ以下の幅320pxのデバイスで表示させると 12378pxのデザインが全体的に縮小されて表示される 13 14378px以下になった際に viewport を下記のように書き換えればそのような挙動になると思います。(JavaScriptで書き換え可能です) 15```HTML 16<meta name="viewport" content="width=378,initial-scale=1">

【もう逃げない。HTMLのviewportをちゃんと理解する - Qiita】
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

投稿2017/02/08 12:38

編集2017/02/08 12:38
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/02/09 00:18

ありがとうございます!!!!! 質問して10日程たちますが悩みを放置していた状態でした 理解できました!!! 基礎がなってないのでこんなことを悩むのだと反省しきりなのですが・・・ kei344さんのように親切にお教え下さる方の御蔭で 少しずつですが前進しています。 ありがとうございます!!!
guest

0

固定系の端末を用意できなかったですが、サイズでデザインを変える方法
CSS MEDIAとはこんなモノです。

css

1p { color:red;} 2body{min-width:375px;} 3@media screen and (min-width:480px) { 4p { color:#ededed;} 5}

投稿2017/01/30 14:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/31 00:03

ご教示ありがとうございます。質問の情報が不足していました、申し訳ないです。 現状Bootstrapとメディアクエリを併用してで各デバイスごとにデザインが変わるようにしているのですが、 デザインの内容ではなくそもそも規程のサイズ以下に小さくできないようにできたらと思うのです。 イメージはこのヤンマーのサイトのような感じです。https://www.yanmar.com/jp/
guest

0

Cssで制御するのが一般的だと僕は思います。
CSS mediaクエリと一度検索してみてください。

お役に立てると幸いです

投稿2017/01/30 10:38

sweden1

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/31 00:03

ご教示ありがとうございます。質問の情報が不足していました、申し訳ないです。 現状Bootstrapとメディアクエリを併用してで各デバイスごとにデザインが変わるようにしているのですが、 デザインの内容ではなくそもそも規程のサイズ以下に小さくできないようにできたらと思うのです。 イメージはこのヤンマーのサイトのような感じです。https://www.yanmar.com/jp/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問