2015年02月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処

レスポンシブデザインのサイトを作っていて、
ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。

でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。
window.resize()
とかで。


んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、
どうやらwin端末だと切り替えのタイミングがズレることがわかった。

css → 768pxで切り替えたい
  → @media screen and (max-width: 768px)
  → ちゃんと768pxで切りかわる


js → 768pxで切り替えたい
  → if($(window).innerWidth() < 768){
  →  785くらいで切り替わっちゃう

1pxズレるとかの現象じゃなく、20px近くずれちゃう。

んでよくよく観察してみると、
cssのほうはスクロールバーもふくめて768pxになったら切り替わるのに
jsのほうはスクロールバーをのぞいて768pxになったら切り替わるので、
スクロールバーの17px分くらいをを含めると785pxくらいで切り替わっちゃうんだな。

※macのchromeだとスクロールバーが 画面に薄く重なって幅をとらないのでこの問題はおきない。

いろいろ調べたけど、その問題に困ってる記事等がなくて、
あがいていたら、解決した。

それは、

jsのほうの横幅取得をスクロールバーを含めたものにすればよいということだった。

こう変更
if($(window).innerWidth() < 768){

   ↓

if(window.innerWidth < 768){
 
違いがわかりにくいけど、
上は、jqueryのinnerWidth()で、したはjavascriptのinnerWidthなの。

下にすることによって、cssのmedia queryのブレイクポイントと一致した。


めでたしめでたし。 

phpのエラー「Undefined index」というのが出たら

Undefined index

初回アクセス時に$_POSTや$_GETに値が入っていない場合にエラーとなる。
そんなときは

$hoge = $_POST["hoge"];

   ↓

if(isset($_POST["hoge"])){
$hoge = $_POST["hoge"];
}

とする

phpでエラーを確認したい

phpではエラーがおきたときに画面がまっしろになるだけでエラーがでない。

エラーを出すには、phpの最初に以下1文をつける。

ini_set( 'display_errors', 1 ); 

サーバーでphpが動くかどうかテストする

test.php


<html>
 <head>
  <title>php動くの?</title>
 </head>
 <body>
 <?php echo '動いてるよ!'; ?> 
 </body>
</html> 


 

paddingも含めた要素の高さをjqueryで出したい

たとえば、
<div class="hoge">にゃんにゃん</div>

という要素があったとして、この要素の高さを出そうと思ったら
こうしますよね。


var nyanHeight = $('.hoge').height(); 


でもこの.hogeの上下にpaddingがかかっていたら?
例えば、padding:10px 0;などがかかっていても、padding分を計算してくれません。

 heightが20pxだとしたら、上下の10pxを含めると見た目上は40pxになるわけですが、

上記のjqueryでは、nyanHeight は20になっちゃいます。


では、paddingも含めた高さはどうやって出すのかというと、

outerHeight();

リファレンスはこちら

var nyanHeight = $('.hoge').outerHeight(); 


これでpadding分も含まれた数値がとれるよ!


 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ