Дополнительное пространство, появившееся при уменьшении размера мобильной веб-страницы, Galaxy S5

Question

Я пытаюсь создать отзывчивый сайт для своего клиента, но они жалуются, что пользователь может уменьшить изображение и увидеть пробел на краю экрана. Это происходит на iPhone 6, но у меня есть только Galaxy S5 для отладки, и это происходит там, во всех браузерах.

Мой HTML окна просмотра мета выглядит

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Мой CSS запрос выглядит

@-webkit-viewport{ 
     width:device-width; 
     zoom: 1.0; 
    } 
    @-moz-viewport{ 
     width:device-width; 
     zoom: 1.0; 
    } 
    @-ms-viewport{ 
     width:device-width; 
     zoom: 1.0; 
    } 
    @-o-viewport{ 
     width:device-width; 
     zoom: 1.0; 
    } 
    @viewport{ 
     width:device-width; 
     zoom: 1.0; 
    } 



@media screen and (max-width: 768px), 
    only screen and (-Webkit-min-device-pixel-ratio: 1.5), 
    only screen and (-moz-min-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/2), 
    only screen and (min-device-pixel-ratio: 1.5), 
    only screen and (-Webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (-Webkit-min-device-pixel-ratio: 3), 
    only screen and (-moz-min-device-pixel-ratio: 3), 
    only screen and (-o-min-device-pixel-ratio: 3), 
    only screen and (min-device-pixel-ratio: 3) { 
     body { 
      font-family: 'Roboto', Helvetica, sans-serif; 
      font-weight: 300; 
     } 
    } 

Каждый знает, где это пространство приходит от и как я могу сделать это уйти

Спасибо

Answer 1

вопрос фактически ликвидируется будучи глубоко внутри HTML и CSS. Кнопки на домашней странице имели position: absolute и transform: translate(-75%, -50%) (и все префиксы ...), и они вызывали дополнительное пространство.

Я изменил их на position: relative; и установил позиционирование с помощью margin-top: 10%; margin-right: 15%.

Теперь он отлично выглядит.