Website on phone is not the same on laptop mobile view-CodePudding

The website mobile version looks like this:desktop mobile view

But on my phone it looks like this: phone view

I make use of box-sizing, still don’t know why it’s having different scaling

CodePudding user response：

Check what measurement unit you used. If it is Percent (%) or something else you should convert it to pixels, as Percent and other similar units are dependent on the screen size. If this is not the issue, please include the code for it so we can find the issue. Thanks!

CodePudding user response：

If you set the width of the image in terms of the viewport size then you get a circle (at least on the tests I did on IOS).

Obviously you will want to set the vw amount to suit your particular requirement.

This snippet sets it to 10vw for this demo.

However, there is another factor. I think you are relying on the natural dimensions of the images to be square. If they aren't then things could look distorted so this snippet adds an object-fit: cover.This still relies on the faces being in a more or less central position in the overall image - but that would need correction depending on each individual image.

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .kill {
    background: #1d1d1d;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9);
    -webkit-backdrop-filter: blur(4.9);
    height: 100%;
    color: white;
    padding-top: 15px;
  }
  
  .navi {
    width: 100%;
  }
  
  .nipp {
    position: relative;
    z-index: 33;
  }
  
  .rate {
    background: transparent;
    border: 0;
    outline: none;
    margin-right: 25px;
    align-items: center;
  }
  
  .rell {
    justify-content: end;
    display: flex;
  }
  
  .mage {
    width: 10vw;
    height: 10vw;
    object-fit: cover;
    cursor: pointer;
  }
  
  .mage1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .mage2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
  }
  
  .mage4 {
    border: 3px solid #5cb85c;
    padding: 5px;
  }
  
  .butn {
    border: 0;
    outline: none;
    background-color: transparent;
    position: absolute;
    left: 50px;
  }
  
  .txt {
    margin-left: -10px;
  }
  
  @media screen and (max-width:992px) {
    .kill {
      background: #1d1d1d;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4.9);
      -webkit-backdrop-filter: blur(4.9);
      height: 100%;
      color: white;
      padding-top: 15px;
    }
    .navi {
      width: 100%;
    }
    .nipp {
      position: relative;
      z-index: 33;
    }
    .rate {
      background: transparent;
      border: 0;
      outline: none;
      margin-right: 25px;
      align-items: center;
    }
    .rell {
      justify-content: end;
      display: flex;
    }
    .mage {
      width: 10vw;
      height: 10vw;
      object-fit: cover;
      cursor: pointer;
    }
    .mage1 {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .mage2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      position: relative;
    }
    .mage4 {
      border: 3px solid #5cb85c;
      padding: 5px;
    }
    .butn {
      border: 0;
      outline: none;
      background-color: transparent;
      position: absolute;
      left: 50px;
    }
    .txt {
      margin-left: -10px;
    }
  }
</style>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div >
    <nav >
      <div >
        <a  href="#">
          <i ></i> Whatsapp
        </a>
        <div >
          <button > <i ></i></button>
          <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" >
        </div>
      </div>
    </nav>

    <section>
      <div >
        <div >
          <div >
            <img src="https://randomuser.me/api/portraits/men/10.jpg"  alt="">
            <h6 >You</h6>
            <button > <i ></i></button>
          </div>
          <div >
            <img src="https://randomuser.me/api/portraits/women/1.jpg"  alt="">
            <h6 >David</h6>
          </div>
          <div >
            <img src="https://randomuser.me/api/portraits/men/6.jpg"  alt="">
            <h6 >David</h6>
          </div>
          <div >
            <img src="https://randomuser.me/api/portraits/women/18.jpg"  alt="">
            <h6 >David</h6>
          </div>
          <div >
            <img src="https://randomuser.me/api/portraits/men/14.jpg"  alt="">
            <h6 >David</h6>
          </div>
        </div>
      </div>
    </section>







  </div>




  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

Incidentally, I'm not sure why you bother to repeat the styling und er the media query, for example for mage, but that doesn't affect your question so I've left it.