電話でページが拡大縮小されたときにヘッダーを変えないようにする

-1

したがって、2つの異なるWebページにリンクするアプリがあります。最初のものは私によって作られています。それは電話にロードされたときに反応しますので、すべてがうまく収まります。電話でページが拡大縮小されたときにヘッダーを変えないようにする

もう1つは私が働く会社によって作られたもので、反応がありません。

ここでは、両方のページの上部にバーを追加することになっています。これらのバーがアプリに読み込まれると、バーは両方のページで同じサイズにする必要があります。私は非反応性のページでは何も変えられません。一番上のバーだけが変わります。

例として、900pxと360pxを撮影すると、iページでは360pxに収まるように1ページが縮小され、900px幅では1ページが縮小され、モバイル画面に合わせて縮小表示されます。

http://imgur.com/6tV1IDT

私はいつもそれが別の電話に縮小されている場合でも360px幅ページ上のものと同じ高さを有する900px幅1用のバーを作成する必要があります。（異なる幅/高さに縮小する）

ページの残りの部分が拡大縮小されても、電話機の拡大/縮小で無視する要素の高さを設定する方法はありますか？

出典

2017-03-10 ScumbagNiad

「同じサイズ」という意味では？ – Bemmu

これは言葉ではわかりませんでしたので、わかりやすいですが、誰かが類似のものを検索して、ここで終わるので、ここで私はそれを解決しました。

//get the width of the browser without the scaling 
//if the window is smaller than 260 my paged stopped scaling and started to use a horizontal scrollbar instead 
//the minimum depends on your webpage I think. (Change the 260 to the minimum width of your page. 
currentWidth = screen.width > 260 ? screen.width : 260; 

//get the relative size depending on the size of the non-scaling webpage. 
//The page I worked with had a width of 1050. 
//If the browser is wider than the page set the size to 1. 
relativeSize = screen.width < 1050 ? (1050/currentWidth) : 1;

あなたがrelativeSize *を使用することができます（それがスケーリングされていないときのサイズは、あなたが持っている）、それはページがダウンサイズ設定されている場合でも、同じサイズになってしまうでしょう。その値を得た後、

私はそれをonLoadイベントとonResizeイベントに設定し、ページサイズが変更されたときはいつでも私のヘッダーのサイズを変更しました。つまり、誰かがあなたの上にある電話機をひっくり返したときに、再びサイズを変更したい場合があります。

EDIT：window.outerWidthの代わりにscreen.widthを使用して、iphoneで機能させます。

出典

2017-03-15 13:12:19 ScumbagNiad

文書の先頭に追加してください。<meta name="viewport" content="width=device-width, initial-scale=1">あなたの質問がひどく書かれているので、あなたが望むものや修正しようとするものを理解することさえ困難です。

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The rest of the head below... --> 
</head>

出典

2017-03-10 14:03:54 Riddell

ええ、私はそれに言い聞かせ、ちょっとストレスを感じていました。申し訳ありませんが、たくさんのことを申し訳ありません。私はそれを言う良い方法を見つけた後に質問を編集するつもりです。 – ScumbagNiad

申し訳ありませんが、 "あなたが言及することは許されていないことがたくさんある"と、これはあまり遠くないでしょう。秘密が適切な問題の記述よりも重要である場合は、NDAに署名する請負業者にそれを持って行くように指示します。それ以外の場合は、ページのコードがどのようなものか、そして最終結果がどのように見えるかを適切な例を挙げてください。 – CBroe

私はあなただけでそのバーのためのwidth: 100%;を定義した場合、それは非応答ページでも、動作するはずだと思います。

出典

2017-03-11 12:19:35 Johannes

電話でページが拡大縮小されたときにヘッダーを変えないようにする

答えて

関連する問題