Question

I have web page which works fine on browser on device but when i save to home screen to that web page and open from that there exits some screen sizing issue while opening it from icon from desktop.how to settle this.

My css code is below

     *, 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

Okay… that’s completely clear, why you’ve got a fixed height… in your body you set height to 748px… thats not variable.
Try something like this:

I used this in my webapp and it worked fine:

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

I tried to edit your code, but i don’t know, if it will work for you. please have a try:

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