前言
隨著手機螢幕的不斷的變化，同時也遇到一些使用者手機螢幕還是處於240*320這種螢幕的大小，當然也存著在一些不規則的螢幕解析度心寸大小。對於很多的ui來說，不同的手機螢幕很多時候得出多套的圖才能保證手機客戶端在不同的螢幕上實現匹配。針對手機客戶端在不同螢幕下的實現進行規劃，並制定出能夠計算出具體控制項位置的填充區演算法，這個是前期對於不同的手機螢幕的匹配做出的乙個介面適配演算法。
術語與縮寫解釋
vmlvml是the vector markup language(向量可標記語言)的縮寫。vml用於將圖形資料向量化的標記語言。vml相當於ie裡面的畫筆，能實現你所想要的圖形，而且結合指令碼，可以讓圖形產生動態的效果。
viewport
可視區域，除去了所有工具欄、狀態列、滾動條等等之後用於看網頁的區域，這是真正有效的區域。
safari
瀏覽器safari是蘋果計算機的最新作業系統mac os x中的瀏覽器，使用了kde的khtml作為瀏覽器的運算核心
技術預研取得的工作成果
通過本次預研，我學到了怎麼去對不同型號手機螢幕進行適配，更是知道怎麼去選擇更好的方法去進行研發。
本次預研主要得到以下成果：
1. 通過不同手機得到手機螢幕的尺寸大小；
2. 通過「viewport」設定對手機螢幕自動匹配。
技術a的研究報告
通過wml獲取手機螢幕大小：
wap的開發和一般的jsp開發區別不是很大，就是在傳統的html上面增加：
其它方面，包括語法和jsp是一樣的。
假想：因為jsp頁面的顯示中有乙個屬性width，可以設定jsp頁面顯示的大小。只要我得到瀏覽**的手機的寬度之後，將寬度的值賦值在width後面，就可以控制頁面顯示的大小了，這樣只要我們將頁面控制好，在手機裡面顯示的結果應該是整個頁面。
嘗試：通過request.getheader("x-up-devcap-screenpixels"); 我們可以得到結果：
高度：120，寬度：96
通過如下**：
display display = ((windowmanager)getsystemservice(window_service)).getdefaultdisplay();
intwidth = display.getwidth();
intheight = display.getheight();
intorientation = display.getorientation();
當orientation為1的時候，此時手機是豎屏，那麼jsp頁面中width的值為96px，如果orientation的值為2的時候，此時手機螢幕為橫屏，jsp頁面中的width的值為120px。因為wap頁面的高度可以通過手機螢幕的滑動或者翻頁來進行控制，所以這裡只討論了手機的寬度問題。
實現：通過這種方法進行了實驗，沒有得到試用手機的高度和寬度，在網上搜尋發現，這種方案支援的手機有限，尤其是對gsm手機支援更是有限。對於中興手機和moto不支援。很多**給出了現在不支援的手機的型號，和這些手機的高度與寬度，如下所示：
lg手機：
lge-cu6260:screen_width_chars=8,screen_height_chars=9,color_depth=65536,picture_width=120,picture_height=160,picture_format=png/bmp,ringtone_format=mid
motorola手機：
mot-v688:screen_width_chars=8,screen_height_chars=8,color_depth=65536,picture_width=128,picture_height=128,picture_format=png,ringtone_format=mid
等等。目前不支援的手機型號就是這麼多，隨著手機不斷的更是，相信不遵循這個規則的手機型號將會越來越多，如果採用這個方案進行手機螢幕適配的話，那麼我們將要不斷的去對不支援該方式的手機型號進行資料更新。這樣講不斷的增加我們的工作量，而且很有可能做的不完善，所以這種方案不可以。
技術b的研究報告
通過「viewport」對wap網頁進行配置：
通過對現在a3g**進行測試，發現網頁最佳顯示的解析度大概在240*400，當手機螢幕更大的時候，有的手機還是能正常的顯示網頁，但是有的手機顯示的頁面就會比較混亂，可能是手機瀏覽器的不同而導致的。
通過viewport屬性對手機螢幕自動適配進行了設定。設定的引數如下：
viewport所有的屬性：
width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
例如：width=960 或device-width
height=1000 或 device-height
initial-scale=0.5
maximum-scale=2
minimum-scale=1
user-scalable=1 或 0(yes 或 no)
下面我們說說device-width，字面意應該是viewport寬度等於裝置寬度，viewport，也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是出去了所有工具欄、狀態列、滾動條等等之後用於看網頁的區域，這是真正有效的區域。（無論你螢幕多大，如果你裝足夠多的*******，你的viewport最終也會消失掉。）在桌面瀏覽器中，viewport的大小是與瀏覽器視窗大小直接相關的，視窗大了viewport自然就大，同時隨著viewport的改變，頁面布局可能也跟著變。例如width: 100%的頁面寬度就總是和viewport寬度一致。
然而iphone的safari不是這樣理解viewport的，它基於viewport呈現頁面，然後使用者縮放頁面後viewport保持不變，僅僅是頁面內容按比例縮放了。舉個例子，在不設定viewport的情況下，預設viewport為寬度980（單位是畫素），這時候頁面的呈現出來的布局和在桌面短viewport寬度為980時呈現的結果一致，然而因為iphone螢幕寬度為320，因此按比例縮小了。
如果不設定viewpoint，**在viewpoint就會顯示成縮略形式。
目前，我們設計的網頁裡面將初始的縮放比例initial-scale設定的是1.4，這樣螢幕相對窄點的手機顯示的頁面將是比較混亂。將這裡的1.4更改為1.0之後就不出現該問題了。對於android和iphone手機支援多點縮放，如果對我們的網頁縮放太小就會導致手機顯示混亂。當頁面放大超過一定倍數時，顯示的字型和就會顯得失真。
關於技術預研
之前做過軟體開發和一點技術管理，然後回學校讀了研究生。課題空閒之餘去公司做過預研 開發，畢業後乾脆在公司做預研工作。目前對工作比較感興趣，但也有點找不著主線似的惶恐。在網上查了一些關於技術預研的的資料，記錄一下。技術預研 技術預先研究，tpr 跟蹤國內外技術發展，分析技術發展趨勢。跟標準，推提案，參...
CMM 技術預研
技術預研 technical pre research,tpr 是指在立項之後到開發工作完成之前的時間內，對專案將採用的關鍵技術提前學習和研究，以便盡可能早地發現並解決開發過程中將會遇到的技術障礙。技術預研過程域是 spp 模型的重要組成部分。本規範闡述了技術預研的規程，該規程的 目標 角色與職責 ...
rn適配手機螢幕
適配手機螢幕，寬 高 字型 use strict import react from react import from react native var uiwidth 375 var uiheight 667 這裡的值，是設計稿中的高度iphone6 var pixel 1 pixelratio...