1. дома
  2. Вопрос и ответ
  3. Сетка CSS на iOS с использованием переменной ширины ломается. Зачем?

Сетка CSS на iOS с использованием переменной ширины ломается. Зачем?

2016-02-14 1 views
-2

That's how it should look.Сетка CSS на iOS с использованием переменной ширины ломается. Зачем?

Вот как это должно выглядеть.

That's how it does look.

Вот как это выглядит.

То же самое работает на телефонах Android, но ломается на iOS и только при первом загрузке. Если я обновляю страницу, она подходит к правильной вещи.

Это код в рукоятках:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>{{link_data.workplace.name}} - A Super Workplace!</title> 

    <link rel="shortcut icon" href="http://admin.getsuperapp.com/public/superfavicon.ico"> 

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

    <style> 
     @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); 
    @import url(https://fonts.googleapis.com/css?family=Asap:400,400italic); 

    body { 
     margin: 0; 
     padding: 0; 
    } 

    .content { 
     padding-bottom: 62px; 
    } 

    .content .cover { 
    } 

    .cover img { 
     width: 100%; 
    } 

    .content .name-logo { 
     padding-left: 6.79%; 
     box-sizing: border-box; 
     position: relative; 
     top: -7px; 
    } 

    .content .name-logo .logo { 
     width: 58px; 
     height: 58px; 
     border-color: #d8d8d8; 
     border-radius: 4px; 
     border-width: 1px; 
     border-style: solid; 
     overflow: hidden; 
     display: inline-block; 
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24); 
     position: relative; 
     background: #fff; 
    } 

    .content .name-logo .logo img { 
     width: 100%; 
     height: 100%; 
    } 

    .content .name-logo .join-us { 
     width: 70%; 
     display: inline-block; 
     vertical-align: top; 
     position: relative; 
     top: 10px; 
     left: 4px; 
     font-family: 'Asap', sans-serif; 
     font-style: italic; 
     color: rgba(55, 71, 79, 0.54); 
    } 

    .content .name-logo .join-us .text { 
     font-size: 8pt; 
    } 

    .content .name-logo .join-us .company-name { 
     font-family: 'Montserrat', sans-serif; 
     font-style: normal; 
     font-weight: 700; 
     color: #37474f; 
     font-size: 16pt; 
    } 

    .content .company-headline { 
     font-family: 'Asap', sans-serif; 
     font-size: 12pt; 
     line-height: 16pt; 
     color: rgba(0, 0, 0, 0.54); 
     padding-top: 0px; 
     padding-left: 6.79%; 
     padding-right: 6.79%; 
     padding-bottom: 16px; 
    } 

    .content .people-carousel { 
     width: 100%; 
     background-color: #87A0AD ; 
     overflow: hidden; 
    } 

    .content .people-carousel.collapsed { 
     height: 136px; 
    } 

    .content .people-carousel .person { 
     width: 33.53vw; 
     height: 33.33vw; 
     display: inline-block; 
     margin: 0 -2px -4px; 
     overflow: hidden; 
    } 

    .content .people-carousel .person img { 
     width: 100%; 
    } 

    .content .next-person { 
     padding-top: 40px; 
     padding-bottom: 40.3px; 
     background-color: #03A9F4; 
    } 

    .content .next-person .text { 
     text-align: center; 
     font-family: 'Asap', sans-serif; 
     font-style: italic; 
     font-size: 14pt; 
     line-height: 18pt; 
     color: #fff; 
    } 

    .content .next-person .you { 
     font-family: 'Montserrat', sans-serif; 
     font-size: 24pt; 
     line-height: 24pt; 
     color: #ffeb3b; 
     text-align: center; 
     font-weight: 700; 
    } 

    .content .get-app { 
     background-color: #37474f; 

     position: fixed; 
     bottom: -1px; 
     width: 100%; 
    } 

    .content .get-app .badge { 
     display: inline-block; 
     padding-top: 14px; 
     padding-bottom: 10px; 
     padding-left: 12px; 
     padding-right: 32px; 
    } 

    .content .get-app .badge img { 
     width: auto; 
     height: 36px; 
    } 

    .content .get-app .button-wrapper { 
     display: inline-block; 
     width: 46vw; 
     vertical-align: top; 
     padding-top: 12px; 
     padding-right: 12px; 
     padding-bottom: 12px; 
     box-sizing: border-box; 
     float: right; 
     right: 26px; 
     position: relative; 
    } 

    .content .get-app .button-wrapper a { 
     text-decoration: none; 
    } 

    .content .get-app .button { 
     width: 120px; 
     height: 40px; 
     background-color: #FFEB3B; 
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12); 
     border-radius: 4.4px; 
     margin-left: auto; 
     margin-right: -25px; 
    } 

    .content .get-app .button .button-text { 
     font-family: 'Montserrat', sans-serif; 
     font-weight: bold; 
     color: rgba(0, 0, 0, 0.54); 
     text-transform: uppercase; 
     font-size: 14px; 
     letter-spacing: 0.3px; 
     text-align: center; 
     margin: auto; 
     position: relative; 
     top: 11px; 
    } 

    .page-not-found { 
     width: 300; 
     height: 300; 
     border-radius: 5px; 
     border: 1px solid #BCBCCA; 
     margin: auto; 
     margin-top: 100px; 
    } 

    .page-not-found .text { 
     font-family: sans-serif; 
     text-align: center; 
     padding: 100; 
    } 
    </style> 
</head> 

<body> 
{{#if link_data.enabled}} 
<div class="wrapper"> 
<div class="content"> 
    <div class="cover"> 
     <img src="http://res.cloudinary.com/superapp/image/upload/q_30,w_1242,e_blur:90/{{link_data.workplace.coverImage.cloudinaryId}}" 
      alt="Banner"/> 
    </div> 

    <div class="name-logo"> 
     <div class="logo"> 
      <img src="http://res.cloudinary.com/superapp/image/upload/w_230/{{link_data.workplace.logo.cloudinaryId}}" 
       alt="logo"/> 
     </div> 

     <div class="join-us"> 
      <span class="text">Come join us at</span> <br/> 
      <span class="company-name">{{link_data.workplace.name}}</span> 
     </div> 
    </div> 

    <div class="company-headline"> 
     {{link_data.workplace.headline}}... 
    </div> 

    <div class="people-carousel {{#unless link_data.workplace.peopleCarousel.4.image}}collapsed{{/unless}}"> 
     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.0.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.0.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 

     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.1.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.1.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 

     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.2.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.2.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 

     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.3.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.3.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 

     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.4.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.4.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 

     <div class="person"> 
      {{#if link_data.workplace.peopleCarousel.5.image}} 
      <img src="http://res.cloudinary.com/superapp/image/upload/q_70,w_380,e_blur:20/{{link_data.workplace.peopleCarousel.5.image.cloudinaryId}}" 
       alt="person"/> 
      {{/if}} 
     </div> 
    </div> 

    <div class="next-person"> 
     <div class="text"> 
      Will the next person <br/> 
      to join {{link_data.workplace.name}} be 
     </div> 

     <div class="you"> 
      you? 
     </div> 
    </div> 

    <div class="get-app"> 
     <div class="badge"> 
      <img src="http://res.cloudinary.com/superapp/image/upload/v1453184144/super-badge-ios_3x_x1zdix.png" 
       alt="badge"/> 
     </div> 

     <div class="button-wrapper"> 
      <a href="{{action}}"> 
       <div class="button"> 
        <div class="button-text"> 
         Get the App 
        </div> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 
    </div> 
    {{else}} 
    <div class="page-not-found"> 
     <div class="text"> 
      Page Not Found! 
     </div> 
    </div> 
    {{/if}} 
    </body> 
</html>

источник

2016-02-14 ScionOfBytes

+0

Ваши коды dont find device – SwiftDeveloper

+0

@SwiftDeveloper Не получилось. – ScionOfBytes

ответ

0

Обычно, когда вещи фиксируются при перезагрузке страницы, проблема заключается в том, что img не загружена в то время, применяются стили, поэтому rendered не знает ширину/высоту элемента и неправильно отображает макет, вы должны принудительно настроить макет в соответствии с вашими потребностями.

  • Попробуйте установить фиксированный width и height для img тегов.

  • Попробуйте установить vertical-align:bottom всем img и .person

  • Попробуйте установить overflow:hidden на .person

Я не уверен, что, если все это будет работать, но я надеюсь, что по крайней мере одна воля ,

источник

2016-03-04 08:36:43 xpy

Смежные вопросы

 Смежные вопросы