Q&A
ブラウザの機能の拡大・縮小機能利用時にページ内の要素に高さをpx指定する方法。
html内のdiv要素にcssにて、heightをpx指定してあります。
ブラウザの拡大・縮小機能を利用した際にpx指定したサイズが
予期せぬサイズで表示されてしまいます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>px test</title> 6</head> 7<body> 8<style> 9div.field { 10 width:100px; 11 border-bottom:1px solid #000; 12} 13div.cell { 14 height:40px; 15 border-top:1px solid #000; 16 border-left:1px solid #000; 17 border-right:1px solid #000; 18} 19</style> 20<h1>px test</h1> 21<div class="field"> 22 <div class="cell"></div> 23 <div class="cell"></div> 24 <div class="cell"></div> 25 <div class="cell"></div> 26 <div class="cell"></div> 27</div> 28 29</body> 30</html>
###ブラウザの拡大・縮小時のサイズ
上記のソースをブラウザ(chrome使用)で表示する際
通常表示はdeveloper toolで確認すると41pxですが、
ブラウザの縮小/拡大 機能を利用した場合、
以下のサイズになってしまいます。
| 拡大・縮小率 | 実際のサイズ |
|---|---|
| 25% | 44 |
| 33% | 42.98 |
| 50% | 42 |
| 67% | 41.48 |
| 75% | 41.33 |
| 90% | 41.11 |
| 100% | 41 |
| 110% | 40.91 |
| 125% | 40.8 |
| 150% | 40.67 |
| 175% | 40.57 |
| 200% | 41 |
| 250% | 40.8 |
| 300% | 41 |
| 400% | 41 |
| 500% | 41 |
拡大・縮小を行った際に、常に指定したheight(今回は41px)で
表示させることは可能でしょうか？
###試したこと
div.cellに対して、
box-sizing: border-box;
を指定してみましたが、拡大縮小時にheightやwidthが期待する値になりませんでした。
###補足情報
MAC OS Yosemite
chrome 50.0.2661.94
にて動作確認しました。
回答2件
0
ベストアンサー
ブラウザの拡大縮小機能は、そのまま表示を拡大縮小する場合があります。(表示自体をズームしたような感じ)
これはブラウザの仕様なのでどうにも出来ません。
投稿2017/02/21 13:40
総合スコア607
0
もしかしたら、ご使用のモニターの解像度によるズレかもしれません。
投稿2016/05/22 15:17
総合スコア476
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/06 01:29