<!DOCTYPE HTML><HTML><head> <Meta charset="utf-8"> <Title>iPad test</Title> <Meta name="vIEwport" content="wIDth=device-wIDth"> <style> body { margin:0; } #content { margin: 0 auto; wIDth: 980px; border:1px solID #c4c4c4; background-color:#f5f5f5; } </style></head><body><div ID="content"> A small amount of content</div></body></HTML>
在iPad上观看时,980px的主要内容区域将不会自动缩放以适应iPad屏幕.但是,如果您使用大量内容替换少量内容,即…足以导致垂直滚动,则页面将在iPad上自动缩放.
有人知道为什么吗?我一直在搜索高低,当页面上的内容很少时,似乎无法找到强制自动缩放的方法.
将视口内容更改为wIDth = 980当然会解决问题,但是我创建了一个响应式网站,因此视口需要是设备宽度.
我正在使用媒体查询来改变智能手机上内容区域的CSS(达到100%宽度),我希望使用iPad的标准桌面版本的iPad.
任何想法将不胜感激.
注意:我在带有视网膜显示器的iPad上进行测试,我不确定旧型号会发生什么.
解决方法 经过一段时间的休息后,我以不同的角度回来了 – 如果将视口宽度设置为特定值可以解决我的iPad问题,为什么不这样做呢.因此,我的解决方案是将视口宽度默认为设备宽度以处理智能手机设备,然后检测iPad并调整视口宽度:
<Meta name="vIEwport" content="wIDth=device-wIDth"><script type="text/JavaScript"> if(navigator.userAgent.match(/iPad/i)) { vIEwport = document.querySelector("Meta[name=vIEwport]"); vIEwport.setAttribute('content','wIDth=980'); }</script>
感谢您的建议insertusernamehere
总结以上是内存溢出为你收集整理的html – iPad缩放以适应在内容最少的网页上不起作用全部内容,希望文章能够帮你解决html – iPad缩放以适应在内容最少的网页上不起作用所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)