隨著3G的普及，越來越多的人使用手機上網。移動設備正超過桌面設備，成為訪問互聯(lián)網的最常見終端。于是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現(xiàn)同樣的網頁？本篇文章將講述自適應網頁設計的概念和方法，使網頁開發(fā)人員維護同一個網頁代碼，即可使網站在多種設備上具有更好的閱讀體驗。本文詳細介紹了自適應網頁的實現(xiàn)方法，希望能給迷惑的你帶來幫助。
一. 在HTML的頭部加入meta標簽
在HTML的頭部，也就是head標簽中增加meta標簽，告訴瀏覽器網頁寬度等于設備屏幕寬度，且不進行縮放，代碼如下：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
簡單分析一下這一行代碼的含義：width=device-width表示網頁的寬度等于設備屏幕的寬度，initial-scale=1.0表示設置頁面初始的縮放比例為1，user-scalable=no表示禁止用戶進行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設置最大的和最小的頁面縮放比例。因為各大瀏覽器對meta標簽的解析程度不一樣，所以我們要盡可能的去兼容所有瀏覽器。
二. 百分比布局
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數(shù)據(jù)結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式