忍者ブログ

そうだったのかブログ

初心者がゲームつくりに、プログラミングに、悪戦苦闘するブログ。

スマホ画面の左端からページがはみだしている


こんにちは。ほしなとおるです。

プログラムというかスクリプト初心者です。

Unityを頑張って勉強しようしていたら、Javascriptを扱う必要が発生しました。

せっかくなのでjavascriptも勉強だ。





 スマホ画面でホームページの左端が切れて表示される



通常、PCのブラウザで作成ページの確認をしてアップロードしてました。

が。

ふとスマホでそのページをみたら・・・

「左端が切れている!スワイプしても出てこないぞ!」

ページのコンテンツはさておいて、見れるべきものが表示されないのはとても気持ちが悪く、気になってしかたありません。

今回は『スマホ画面ではホームページを左詰めで表示させる』という記事です。





 原因はコンテンツを中央に配置したこと



なにも位置の指定をしなければ、普通にブラウザの左端上端からホームページは表示されるでしょう。

原因は、まさに「位置合わせ」でした。


PCのブラウザで閲覧するときに、コンテンツが中央に表示されるようスタイルシートに記述していたのです。

 #main{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0%);
 }
 ※↑とりあえず該当部分抜粋。 

ブラウザ表示画面内の左上を基準にして(position:absolute;)ふたつのプロパティで、コンテナを画面中央に配置しました。
 left:50%;で、表示画面幅全体を100%として、半分(50%)の位置まで要素mainを右側にもってくる。
 そんでその位置から、transform:translate(-50%,0%);で、要素の幅全体を100%とした、半分を左側に戻す(-50%)。
 ※0%部分は、上下の指定なので、動かさないということ。これでmainが真ん中に。


このスタイルシートの記述が…


スマホの画面などの表示画面幅が、要素の幅(今回は<div id="main"></div>)よりも小さいときに、表示画面左端からはみ出すという現象を起こしたようです。




 中央配置は維持したまま、左端が切れないようにする



PCブラウザで閲覧するときのために、中央配置はやめたくない。
でも、スマホとか小さい画面のときは左端配置にしたい。

そこで初心者は感じました。「こういうときにjavascriptを使うのかな?」

HTMLとCSSはちょこちょこいじってみてたのですが、javascriptをいじるのは初めて。
面倒で寝てしまいたかったのですが、頑張ってjavascriptの使い方について検索しました。

二日ほど寝不足した結果、次のようにすればいいのか?と。

 ① ページを表示したとき、コンテンツの左端の位置を調べる。
 ② 表示画面左端からはみ出ていたら、コンテンツ左端を表示画面左端に合わせる。

このふたつが実現できれば、どんな画面でも気持ちよく表示できる気がする。

そのスクリプトがこちら。

いろいろ試行錯誤していたら、leftプロパティを1回だけ決めればいいんだと気づいた。

① 表示画面幅を調べて、左端から中央までの距離を出す。
② 要素の幅を調べて、真ん中までの長さを出す。
③ ①から②を引けば、leftに入れる距離(px)となる。(右にいって左に戻したのと同じ)
④ ③の距離がマイナスの時は表示画面左端からはみ出るということなので、if文を使って、はみ出るときはleftに入れる距離は、ゼロにする。
⑤ 距離に単位pxをくっつける。
⑥ leftに⑤をいれる。
⑦ あと、ブラウザの表示画面を変えたときwindow.onresizeで表示しなおす。



で、ブラウザの表示画面を小さくしてみた。


左端からはみ出ませんでした。うまくいったかな?




 ちゃんと表示されました



スマホ画面では左端がしっかり表示されるようになりました。
よかったよかった。





 参考記事 (お世話になりました)



とほほのJavaScriptリファレンス JavaScript の基本文法

Js-primaer 関数と宣言 

CMAN WEBページ作成リファレンス 「ウインドウサイズを取得」




拍手[0回]

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

トラックバック

プロフィール



HN:
ほしなとおる
性別:
男性
自己紹介:
PCで創作活動してます。
作画ツールはFireAlpaca、GIMP。
最近UNITYをお勉強中。

フリーエリア

P R