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

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

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

我用这个在我的web应用程序，它工作得很好：

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; 
    } 

Answer 2

尝试把这个在你的头在自己的网页：

<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" />