Question

我的网页在设备上的浏览器上工作正常，但是当我将主屏幕保存到该网页并从中打开时，从桌面打开图标时会出现一些屏幕尺寸问题。解决此问题。

我的css代码在

之下

     *, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, nav, header, section {
margin: 0; padding: 0; border: 0;
    }


   /* Styles */
     body {
     width:2048px;
     height:748px;
     background-color: #fff;
     overflow: hidden;
    font-family:Verdana, Geneva, sans-serif;
    }
    #container {
position:absolute;
width: 2048px; margin:0; 
overflow-x:hidden;
overflow-y:hidden;
padding: 0;
    }

   .panel{
background-image:url(image/testing_file_1.png);
background-repeat:no-repeat;
height:748px;
width:1024px;
position:relative;
float: left;
padding:0;
bottom:0;
top:0;
margin:0;
display:inline;
}
   .main_heading{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
    }
    .main_heading_two{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
    }
   .menu {
float:right;
margin: 39px 18px 0 0;
height:47px;
background-repeat:no-repeat;
    }

    .menu ul li {
list-style:none;
float:left;
    }

    .menu ul li a {
text-decoration:none;
display:block;
    }

    .menu .active {
text-decoration:none;
background-image:url();
    }

   .menu .stix {
width:2px;
font-size:0px;
background-image:url(image/seperator.gif);
background-repeat:no-repeat;
padding:0;
height:47px;
    }

    .midmenu {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: 248px 0 0 0;

    }
   .midmenu1 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: 248px -500px 0 0px;
   }

   .rightclass img{
padding: 2px 20px;
float:right;
width:459px;
height:560px;
z-index:10;}
   .text_paragraph{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-525px;
   }
   .text_paragraph_1{
float:left;
width:420px;
color:#FFF;
margin-left:80px;
margin-top:-464px;
    }
   .text_paragraph_1 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
    }
   .text_paragraph_1 ul li{
margin-top:5px;
    }
    .text_paragraph_2{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-285px;
   }
    .text_paragraph_2 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
   }
   .text_paragraph_2 ul li{
margin-top:5px;
font-style:italic;
   }
   .text_paragraph_2 p{
float:left;
color:#FFF;
margin-top:5px;
   }
   .linkbutton{
margin:-70px 0 0 70px;
float:left;}
   small
   {
font-size:9px;
    }






   .rightclass_one img{
margin: 2px 21px;
float:right;
width:459px;
height:560px;
z-index:10;}
    .midmenu_1 {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: -45px 0 0 0;

    }
    .midmenu_2 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: -45px -500px 0 0px;
    }
    .right_text{
float:right;
color:#000;
margin-right:-470px;
width:440px;
text-align:center;
margin-top:-270px;}
   .image_21{

   float:right;
    margin-right:-390px;
    margin-top:-190px;}

   .ratemeter{
float:right;
margin-right:-410px;
margin-top:20px;}
   .image_one{
  float:right;
  margin-right:-450px;
  margin-top:92px;
  z-index:5;
   }
 .image_two{
 float:right;
 margin-top:93px;
 margin-right:-254px;
 z-index:10;
  }
   .image_one_one{
 float:right;
 margin-top:95px;
 margin-right:-317px;
 z-index:10;
 }
 .image_two_two{
  float:right;
  margin-right:-452px;
  margin-top:92px;
  }

Answer 1

尝试从您的网页上把它放在脑子里：

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />

Answer 2

好的......那是完全清楚的，为什么你有一个固定的高度...在你的身体中你设置高度为748px ......这不是变量。尝试这样的事情：

我在我的webapp中使用了它，它工作得很好：

body {
    position: relative;
    margin: 0;
    -webkit-text-size-adjust: none;
    min-height: 416px;
    -webkit-touch-callout: none;
}

我尝试编辑你的代码，但我不知道，它是否适合你。请试一试：

 body {
     width:2048px;
     min-height:748px;
     background-color: #fff;
     overflow: hidden;
     font-family:Verdana, Geneva, sans-serif;

     -webkit-text-size-adjust: none;
     -webkit-touch-callout: none;
     margin: 0;
     position: relative;
    }

iPad网络应用程序桌面版全屏

2 个答案: