資訊專欄INFORMATION COLUMN
摘要：和一部分安卓設(shè)備的屏幕尺寸為英寸厘米，物理像素為大約是。對(duì)開發(fā)者來說，手機(jī)在豎直狀態(tài)下的寬度就是，開發(fā)者就可以根據(jù)這個(gè)尺寸來設(shè)計(jì)網(wǎng)頁，但是還要考慮手機(jī)在水平狀態(tài)時(shí)的頁面效果，以及和安卓平板上的頁面效果。
最近兩周寫了幾個(gè)頁面，雖然看起來很簡(jiǎn)單，但是也考慮到了IE8的兼容性、不同屏幕尺寸的適配性以及其它的一些方面，所以也算是小有收獲。下面就把寫代碼過程中遇到的各種問題和解決方案記錄下來。
head區(qū)域的要點(diǎn) 瀏覽器渲染模式X-UA-Compatible
這一句是指IE系列瀏覽器以其最高版本運(yùn)行，而不是兼容模式；同時(shí)讓安裝了Chrome Frame的瀏覽器開啟Chrome Frame的渲染模式。
IE=edge這一句對(duì)低于11的IE都有效，IE11則默認(rèn)開啟此選項(xiàng)。如果寫成IE=9; IE=8; IE=7這種形式，則各版本IE均以自身版本的模式運(yùn)行，而不是向下兼容。就實(shí)際應(yīng)用而言，建議還是采用IE=edge這種形式。
參考鏈接：
Is it still valid to use IE=edge,chrome=1?
“X-UA-Compatible” content=“IE=9; IE=8; IE=7; IE=EDGE”
移動(dòng)端瀏覽器為了保證PC端頁面能夠正常顯示，在一個(gè)虛擬的“窗口”（viewport）中渲染頁面，viewport通常是比頁面要寬的，這樣才能保證整個(gè)頁面都顯示在移動(dòng)端瀏覽器中。在移動(dòng)端瀏覽器里面，用戶縮放查看頁面時(shí)，頁面整體布局是不變的。
一般來說，為了保證頁面能在移動(dòng)端瀏覽器里面正常顯示，都會(huì)加上下面這么一行。
上面這一行中，width屬性設(shè)置視口的寬度等于設(shè)備的寬度，按CSS像素來說的話，就是100%的比例。這樣設(shè)置了之后，頁面在寬度這個(gè)方向上的所有內(nèi)容就完整展示在瀏覽器中了。initial-scale屬性設(shè)置頁面初次加載完成后的縮放級(jí)別為1，這個(gè)就沒什么可說的了。至于是否要加上禁止用戶縮放的user-scalable=0，就見仁見智了。
iPhone和一部分安卓設(shè)備的屏幕尺寸為3~4英寸（7~10厘米），物理像素為320~480（大約是160dpi）。對(duì)web開發(fā)者來說，手機(jī)在豎直狀態(tài)下的寬度就是320px，開發(fā)者就可以根據(jù)這個(gè)尺寸來設(shè)計(jì)網(wǎng)頁，但是還要考慮手機(jī)在水平狀態(tài)時(shí)的頁面效果，以及iPad和安卓平板上的頁面效果。
在160dpi下設(shè)計(jì)的頁面，在240dpi的屏幕中，設(shè)置了initial-scale=1屬性之后，頁面會(huì)縮放至原始大小的150%。文本自然會(huì)更加清晰、銳利，但是位圖就可能會(huì)變模糊了，那么為了保證在這兩種dpi下都有很好的顯示效果，就需要按照最終尺寸的150%（或者200%，如果還要考慮retina屏320dpi的蘋果設(shè)備的話）來設(shè)計(jì)頁面了，并通過CSS或者視口來根據(jù)設(shè)備實(shí)際情況對(duì)頁面進(jìn)行合理縮放。
參考鏈接：
Using the viewport meta tag to control layout on mobile browsers
移動(dòng)前端開發(fā)之viewport的深入理解
為什么要用normalize.css而不是css reset？官網(wǎng)上總結(jié)了以下幾點(diǎn)：
保留有用的瀏覽器默認(rèn)樣式；
將一大批HTML元素的樣式進(jìn)行規(guī)范化；
修正瀏覽器的bug并保證各瀏覽器的一致性；
通過細(xì)微的改進(jìn)，來提升可用性；
在代碼中用注釋和詳盡的文檔加以解釋，讓開發(fā)者知其所以然。
除此之外，normalize.css還支持IE8及更高的版本，和自己的開發(fā)需求也是相符的。
IE兼容性相關(guān)To be continued...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116434.html
摘要：和一部分安卓設(shè)備的屏幕尺寸為英寸厘米，物理像素為大約是。對(duì)開發(fā)者來說，手機(jī)在豎直狀態(tài)下的寬度就是，開發(fā)者就可以根據(jù)這個(gè)尺寸來設(shè)計(jì)網(wǎng)頁，但是還要考慮手機(jī)在水平狀態(tài)時(shí)的頁面效果，以及和安卓平板上的頁面效果。 最近兩周寫了幾個(gè)頁面，雖然看起來很簡(jiǎn)單，但是也考慮到了IE8的兼容性、不同屏幕尺寸的適配性以及其它的一些方面，所以也算是小有收獲。下面就把寫代碼過程中遇到的各種問題和解決方案記錄下來。...
摘要：前端期望中的設(shè)計(jì)能給予的除了之外，還有設(shè)計(jì)上游崗位傳遞下來的東西。份文件一份好的文件是分層清晰，設(shè)計(jì)規(guī)范的文件。有些頁面設(shè)計(jì)師沒有考慮到。地址如下原文鏈接我們前端是怎么跟設(shè)計(jì)師溝通的豪情博客園 1.交付 一般設(shè)計(jì)師給前端的只有psd，沒有其它多余的東西，連基本的文檔都懶得給。前端期望中的設(shè)計(jì)能給予的除了psd之外， 還有設(shè)計(jì)上游崗位傳遞下來的東西。 比如： 產(chǎn)品原型， 需求文檔， 交...
摘要：在中使用在中使用腳本有兩種方式一種是嵌入在中的腳本，另一種是引入外部的腳本。二者并行執(zhí)行，不會(huì)造成阻塞。字符編碼，較少使用。放置的位置將腳本放在標(biāo)簽前是最佳的。小結(jié)把插入到頁面中要使用元素。延遲腳本總是按照指定它們的順序執(zhí)行。 在 HTML 中使用 JavaScript 在html中使用JavaScript腳本有兩種方式一種是嵌入在HTML中的腳本，另一種是引入外部的腳本。兩種方式都離...
摘要：高級(jí)程序設(shè)計(jì)摘錄可選。表示通過屬性指定的代碼的字符集。這個(gè)屬性并不是必需的，如果沒有指定這個(gè)屬性，則其默認(rèn)值仍為。規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于事件執(zhí)行。 《javascript高級(jí)程序設(shè)計(jì)》摘錄： async:可選。表示應(yīng)該立即下載腳本，但不應(yīng)妨礙頁面中的其他操作，比如下載其他資源或 等待加載其他腳本。只對(duì)外部...
摘要：文件內(nèi)部使用使用到的代碼引入外部文件外部代碼的地址標(biāo)簽的位置一般情況下，標(biāo)簽的位置放在標(biāo)簽中引入代碼頁面結(jié)構(gòu)對(duì)于需要引入很多的中間，如果把放在頭部，無疑會(huì)導(dǎo)致瀏覽器呈現(xiàn)頁面出現(xiàn)延遲，就是導(dǎo)致頁面出現(xiàn)空白。頁面結(jié)構(gòu)引入代碼 這篇筆記的內(nèi)容對(duì)應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第二章。 1.使用方式 在HTML中使用 JavaScript 的方式有兩種，第一種就是直接內(nèi)...
閱讀 3027·2023-04-26 00:32
閱讀 511·2019-08-30 15:52
閱讀 2118·2019-08-30 15:52
閱讀 3363·2019-08-30 15:44
閱讀 3291·2019-08-30 14:09
閱讀 1424·2019-08-29 15:15
閱讀 3404·2019-08-28 18:12
閱讀 1088·2019-08-26 13:55
