[英]How to resize a image that is displaying as stretched only on mobile phones?
[英]How to resize html pages on mobile phones
我是 HTML 和 CSS 開發的新手。 我創建了一個在 PC 網絡瀏覽器上看起來不錯的 html。
但是,當我使用我的Android手機瀏覽器查看它時,由於手機屏幕太小,需要進行很多滑動才能定位到我想要聚焦的區域。
我的網頁中間只有一個索引表,而正文的左右都是空白的。 我在想是否有任何方法可以檢測瀏覽器以查看它是否來自移動設備,然后調整頁面正文的大小?
歡迎任何建議。 提前致謝。
它是:
你應該看看並學習一些像這樣的響應式網站代碼。
如果您不希望在較小的屏幕上出現水平滾動條,請嘗試在開頭標記<meta content='width=device-width, initial-scale=1' name='viewport'/>
之后添加此代碼。
今天最流行的方法是使用 CSS 媒體查詢。 媒體查詢中的任何代碼僅適用於指定的參數。 這通常適用於瀏覽器的高度和寬度,但它也適用於打印的樣式表、顯示分辨率和其他一些東西。
這是一個示例,目標瀏覽器寬度介於 320 像素和 480 像素之間,這是智能手機的常見尺寸。
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background: #999;
width: 100%;
}
}
您可以在此處找到更多示例: http : //css-tricks.com/snippets/css/media-queries-for-standard-devices/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.