zoukankan      html  css  js  c++  java
  • 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;
     620px;
    }
    @-ms-viewport
    {
     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

  • 相关阅读:
    【NOI2005T4】聪聪和可可-期望DP+记忆化搜索
    总结:最大权闭合子图
    【NOI2009T4】植物大战僵尸-最大权闭合子图+拓补排序
    codevs 1090 加分二叉树
    codevs 1503 愚蠢的宠物
    codevs 1992 聚会
    welcome to new life
    codevs 1066 引水入城
    codevs 2021 中庸之道
    POJ 2104 K-th Number
  • 原文地址:https://www.cnblogs.com/JAVA-STUDYER/p/7257004.html
Copyright © 2011-2022 走看看