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

関連記事

備忘録

カラーコード16進数、RGBA、補色、反転色変換ツール

公開先リンク サンプル
備忘録

【Laravel】CORS対応

結論 ライブラリ「barryvdh/laravel-cors」を使用する。 異なるドメイン間で通信する場合は、CORS対応が必要です。 詳細 インストール $ composer require barryvdh/laravel-cor...
備忘録

よく使うflexboxチートシート

Flexコンテナ(親要素) flex-direction 子要素の並ぶ方向 row 左から右へ並ぶ(default) row-reverse 右から左へ並ぶ column 上から下へ並ぶ column-reverse 下か...
備忘録

【Nuxt,js/Vue.js】確認ダイアログコンポーネントで$emitの挙動を学ぶ

結論 $emitは子コンポーネントから親コンポーネントにイベントを送るときに使用する 実際にNuxt.jsで$emitを使用して確認ダイアログを作成してみる ▼親コンポーネント pages/sample/dialog.vueに子である...
備忘録

要素を見えないようにするが、スクリーンリーダーには読ませるcss

.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(100%); width: 1px; height: 1px; overflow: h...
備忘録

Vue.js 3.0で導入予定のCompositionApi について

※この記事は2020年2月22日に試したものです。現在はVue3.0リリースされています。 Vue.js 3.0の主要な変更点 Composition API 仮想DOMの書き換えパフォーマンスの向上 TypeScriptサポ...
Laravelの.htaccessファイルについて
nuxtでvue2-highchartsを使って折れ線グラフを描写してみた
ホーム
備忘録

人気記事

PMBOK入門6章 テスト・移行フェーズ
2021.10.012021.12.03
スプレッドシートでシート名から日付を取得する
2019.03.012020.03.01
LaravelのURLからpublicを消す簡単な方法
2019.03.082020.03.01
【React】vueのv-htmlに該当するもの
2019.07.162020.03.01
vueのイベントハンドラ(v-on)
2019.06.30

外部リンク

  • GitHub
  • Portfolio2019

タグ別記事一覧

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

カテゴリ別記事一覧

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

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

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