2015-10-12 3 views
-2

Новое здесь, дайте мне знать, если я отправил сообщение в неправильном месте.Превышение пробела, ширина страницы

Я сделать новый веб-сайт, немного хобби, самостоятельно подумал помощью интернет-форумах и Google :)

У меня есть проблема, я не использовал много CSS и раньше, но, кажется, это лучший способ стиля. При посещении страницы на мобильном телефоне ее швы должны быть увеличены вправо и иметь огромное пустое пространство справа. Я просмотрел несколько сообщений в Интернете, но не могу шов, чтобы избавиться от этого лишнего пространства.

Вот первая часть файла для отображения этого ..

<style type="text/css"> 
html, body { 
    width: 400px; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    overflow-x: hidden; 
} 

main { 
    posistion: relative; 
    height: auto; 
    width: 400px; 
    margin: 0; 
    padding: 0; 
    display: block; 
    text-align: center; 
    z-index: 0; 
} 

li a { 
    display: block; 
    width:80%; 
    background:#ddd; 
    padding: 0% 0%; 
    font-size: 30px; 
    text-decoration: none; 
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif; 
} 

    #menu { 
     position: absolute; 
     margin-top: 15px; 
     margin-left: 15px; 
     width:1.4em; 
     display: block; 
     background:#ddd; 
     font-size:1.35em; 
     text-align: center; 
     z-index: 1000; 
    } 

    #nav { 
     position: absolute; 
     margin-top: 44px; 
     margin-left: 15px; 
     width: 135px; 
     display: block; 
     background:#ddd; 
     font-size:1.35em; 
     text-align: left; 
     z-index: 1000; 
    } 

    #nav.js { 
     display: none; 
    } 

    ul { 
     margin-left: 0px; 
     width:150px; 
     list-style: none; 
     z-index: 1000; 
    } 

    li { 
     margin-left: 0px; 
     width:auto; 
     border-right:none; 
     z-index:1000; 
    } 
</style> 
+0

Создать [скрипку] (http://jsfiddle.net/) для лучшего понимания вашей проблемы – Abhi

+0

Спасибо, буду смотреть в этом :) – user5436833

+0

проверить это http://www.w3schools.com/ css/css_rwd_viewport.asp – puzzler

ответ

1

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 
+0

. Спасибо, просто выполнил задание, теперь нужно пересмотреть размер элементов, так как они 400 пикселей, больше, чем многие мобильные экраны , Будет использовать доверенный%, как и раньше. – user5436833

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