iPad web app 桌面版全屏

Posted 2023-03-12

【中文标题】iPad web app 桌面版全屏

【英文标题】：iPad web app Full screen in Desktop version

【发布时间】：2012-04-26 06:25:34

【问题描述】：

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

我的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;
  

【问题讨论】：

我不明白你的问题，请详细说明或重述。

@MichaelDautermann 我希望当我在 safari 中打开这个网络应用程序时它看起来很好，因为它设置了地址栏位置，或者它通常在浏览器上显示，但是当我在添加到主屏幕后打开它时，地址栏被隐藏，页面从底部向上提升，由于地址栏被移除，dit 与底部大小有空间

@Michael Dautermann 我希望当我在 safari 中打开这个网络应用程序时它看起来很好，因为它设置了地址栏位置或者它通常在浏览器上显示但是当我在添加到主屏幕后打开它时地址栏被隐藏，页面从底部向上提升，由于地址栏被移除，dit 与底部大小有空间

【参考方案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" />

【讨论】：

我也放了这个，但是当页面从 ipad 设备的主页或桌面打开时，它再次显示网页底部的空间

你为什么要发两次？？

【参考方案2】：

好的...这很清楚，为什么您有一个固定的高度...在您的身体中，您将高度设置为 748 像素...这不是可变的。 试试这样的：

我在我的 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;