motoori
仕事も趣味も全力で楽しむ

iPadなどのタブレットでのheight(vh)が
PCブラウザとずれる現象の対策

2020.03.01 2019.07.05
  1. 結論
    1. 原因
    2. 参考

結論

CSSStyleDeclaration.setProperty()を使用してvhを再定義する

原因

タブレットなどではvhの高さにメニューバーの高さも含まれてしまうため。

参考

CSSStyleDeclaration.setProperty()

備忘録
CSS JavaScript
シェアする
Twitter Facebook はてブ LINE コピー
mogataro
motoori

関連記事

備忘録

$route.pathで現在ページのURLを取得する

this.$route.pathで現在のURLのパスを取得することができる。 例えば、以下ではURLのパスごとにヘッダーのテキストを切り替えている 上記コードのサンプルページ
備忘録

tableタグ セルの結合

結論 td、th要素にcolspan属性、rowspan属性を指定する。 colspan:横に結合 rowspan:縦に結合 <table frame="box" border="1"> <tr> ...
備忘録

Nuxt.jsでPugを使用する

pug-plain-loaderをインストールする $ npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-...
備忘録

フロントエンド個人的便利ツール

Page Ruler Redux 長さを測れるcromeの拡張機能 CSSViewer 要素にカーソルを合わせると、要素のスタイルがみれるcromeの拡張機能 InkScape SVGファイルを作成するのに使用(イラストレー...
備忘録

borderで作るカスタムCheckbox

ポイント TABでフォーカスできるようにinput要素はdisplay:none;にはしない。 間接セレクタ(~)を使用することで、input要素がcheckedになった時のCSSを兄弟セレクタに当てる。 サンプルコード ...
備忘録

vueのイベントハンドラ(v-on)

@focus フォーカス時 @blur フォーカスが外れた時 @change value変更時 @click クリック時(同じ要素内でマウスボタンを押して離した後で発生) @dblclick ダブルクリック時 @submi...
Laravelの.htaccessファイルについて
nuxtでvue2-highchartsを使って折れ線グラフを描写してみた
ホーム
備忘録

人気記事

PMBOK入門6章 テスト・移行フェーズ
2021.10.012021.12.03
【React】vueのv-htmlに該当するもの
2019.07.162020.03.01
Laravelの.htaccessファイルについて
2019.07.022020.03.01
スプレッドシートでシート名から日付を取得する
2019.03.012020.03.01
nuxtのspaモードで作成した作成中のアプリをxserverにデプロイしてみた。
2019.05.182020.03.01

外部リンク

  • GitHub
  • Portfolio2019

タグ別記事一覧

  • php
    • laravel
  • javascript
    • react
    • vue
    • nuxt
  • html
  • css
  • mysql

カテゴリ別記事一覧

  • 備忘録58
  • 雑記9
スポンサーリンク
この記事を書いた人
mogataro

WEBエンジニアです。
サーバーサイドエンジニアからフロントエンドエンジニアになりました。

mogataroをフォローする
スポンサーリンク
motoori
© 2019 motoori.