ブラウザの機能の拡大・縮小機能利用時にページ内の要素に高さを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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/06 01:29