Div在手機上出現小號

Question

我有一個網站，可以在這裏看到： http://synodins.com/icemaps。

它在大多數瀏覽器等運行良好，問題出現在手機上。然後引入框變得很小，並且需要放大才能恢復正常。一旦人們完成了這一切，就像任何臺式機/筆記本電腦一樣。

但是人們不想做這個初始縮放，它也給人一個不好的第一印象。

我試圖以編程方式放大，但這使得jquery的自動完成和日曆變得不正確定位。

什麼是最好的方式使介紹框顯示正確的大小在移動設備上？

Answer 1

您可以爲移動設備和基於移動設備（通常由屏幕大小和媒體設置）設置2個委派css文件。對於每種屏幕尺寸都有：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" /> 

或者您需要的尺寸。因此，爲更小的瀏覽器大小或更改字體大小使div更大？

Answer 2

我想你可以使用媒體查詢

您可以設置當通過設置顯示尺寸可以設置與該維度的元素方面應用CSS語句

@media and screen and (max-width:400px){ 
    div{ 
     width:100%; 
    } 
} 
@media and screen and (min-width:400px) and (max-width:1024px){ 
    div{ 
     width:80%; 
    } 
} 
@media and screen and (min-width:1024px){ 
    div{ 
     width:60%; 
    } 
} 

這樣。