jsp页面在 移动端 自适应,chrome浏览器没问题,可是safari浏览器有问题的解决方法

Posted JAVA_STUDYER

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsp页面在 移动端 自适应,chrome浏览器没问题,可是safari浏览器有问题的解决方法相关的知识,希望对你有一定的参考价值。

在网页中设置的1px与物理像素中的1px不会相同,所以导致不同在不同手机上显示结果都不相同,通过以下设置找到了适合当前网页自适应不同手机、不同浏览器的办法,代码如下:

 “

<meta name="viewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" /> ”

其中的width=620px就是网页内容区需要的最小宽度,需要在不同手机上刚好全屏显示,target-densitydpi=device-dpi设置后,css中的1px就会等于物理像素中的1px。

 

补充:由于safari浏览器不支持target-densitydpi=device-dpi,所以加入js代码自动调整缩放比例,调整后的代码:

 “

<style type="text/css">
@viewport
{
zoom: 1.0;
width: 620px;
}
@-ms-viewport
{
width: 620px;
zoom: 1.0;
}</style>
<meta name="viewport" id="WebViewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script language="javascript">
if(screen.width<620)
{
document.getElementById(‘WebViewport‘).setAttribute(‘content‘, ‘width=620px,initial-scale=‘ + screen.width / 620 + ‘,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1‘);
}
</script>

 

转载:http://blog.csdn.net/aminfo/article/details/40895211


以上是关于jsp页面在 移动端 自适应,chrome浏览器没问题,可是safari浏览器有问题的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

Html5移动端页面自适应布局详解

PC端移动端页面适配方案

PC端移动端页面适配方案

移动端fontsize被浏览器自动放大导致rem自适应出问题

网页自动适应移动端页面展示

我的小前端 —— 移动端特殊效果-让页面宽度自适应