CSS無法在移動瀏覽器中正確顯示

我對上述網頁CSS看起來桌面上的瀏覽器正常，但是，在移動瀏覽器周圍的食品配料邊框顯示不正確：

相關CSS：

.page_title { 
    text-transform:capitalize; 
    text-align:center; 
} 
.food_list { 
    text-transform:capitalize; 
} 

.listing { 
    text-indent:10px; 
    margin-right:1500px; 
    margin-left:10px; 
    color:black; 
    background-color:lightblue; 
    border-radius: 10px 20px 30px 40px; 
    -moz-border-radius: 10px 20px 30px 40px; 
    -webkit-border-radius: 10px 20px 30px 40px; 
    -khtml-border-radius: 10px 20px 30px 40px; 
} 

.ul { 
    list-style:none; 
} 

p { 
    text-transform:none; 
} 

p span { 
    display:block; 
}

來源

2013-11-24 barakisbrown

刪除'margin-right：1500px;'，以及您的意思是「顯示不正確」？ –

爲什麼我有margin-right：1500px的原因是，在PC瀏覽器上，該框不會在整個屏幕上延伸。我怎麼能只是圍繞PC和移動瀏覽器上的成分部分？ – barakisbrown

你也可以參考CSS3的媒體查詢功能[這裏]（http://stackoverflow.com/questions/20172061/javascript-if-else-statement-with-3-conditions）這可以確保您所需的大小爲桌面和移動瀏覽器。 – RocketArrows1

試試這個：

jsFiddle

.listing { 
    text-indent: 10px; 
    margin-left: 10px; 
    color: black; 
    float: left; 
    background-color: lightblue; 
    border-radius: 10px 20px 30px 40px; 
    -moz-border-radius: 10px 20px 30px 40px; 
    -webkit-border-radius: 10px 20px 30px 40px; 
    -khtml-border-radius: 10px 20px 30px 40px; 
} 

h2{ 
    clear:both; 
}

來源

2013-11-24 06:46:36

CSS無法在移動瀏覽器中正確顯示

回答

相關問題