Ⅰ 前端工程師遇到要做移動端頁面的時候，給了我一張設計圖，怎麼去切圖，那麼多的手機要適配
用photoshop,然後安裝一個叫cutterman的插件,專門切圖的,適配多種解析度
Ⅱ 前端開發網站怎樣適配手機端查看
加入：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
///////////////////
隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行，移動互聯應用開發也越來越受到人們的重視，用html5開發移動應用是最好的選擇。然而，每一款手機有不同的解析度，不同屏幕大小，如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢？學習html5
viewport的使用能幫你做到這一點……
viewport 語法介紹：
<!-- html document -->
<meta name="viewport"
content="
height = [pixel_value | device-height]
,
width = [pixel_value | device-width ]
,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi
| low-dpi] "
/>
width
控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS
的像素）。
height
和 width 相對應，指定高度。
target-densitydpi
一個屏幕像素密度是由屏幕解析度決定的，通常定義為每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android
Browser和WebView默認屏幕為中像素密度。
下面是 target-densitydpi 屬性的 取值范圍
device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發生默認縮放。
high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。
medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。
<value> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
<!-- html document -->
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />
為了防止Android Browser和WebView
根據不同屏幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設置為
device-dpi。當你這么做了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展示。在這種情形下，你還需要將viewport的width定義為與設備的width匹配，這樣你的頁面就可以和屏幕相適應。
initial-scale
初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為「1.0」，那麼，web頁面在展現的時候就會以target
density解析度的1:1來展現。如果你設置為「2.0」，那麼這個頁面就會放大為2倍。
maximum-scale
最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，如果你將這個值設置為「2.0」，那麼這個頁面與target
size相比，最多能放大2倍。
user-scalable
用戶調整縮放。即用戶是否能改變頁面縮放程度。如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設置為no，那麼minimum-scale
和 maximum-scale都將被忽略，因為根本不可能縮放。
所有的縮放值都必須在0.01–10的范圍之內。
例：
(設置屏幕寬度為設備寬度，禁止用戶手動調整縮放)
<meta name="viewport" content="width=device-width,user-scalable=no"
/>
(設置屏幕密度為高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)
<meta name="viewport"
content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Ⅲ 前端面試題，移動端兼容問題有哪些，安卓和ios問題
那麼進入正文，不廢話，直接把自己了解到的和一些看法說出來。
首先是屏幕問題，現在主流的移動設備以安卓和IOS為主，我們在製作移動端頁面也是以兼容這兩種設備去布局。
首先說iPhone，不得不說iPhone的屏幕考慮到了我們開發者的難處，從而給出iPhone屏幕的dpr都是整數值，在6plus出現之前，iphone的dpr始終是2（物理像素/邏輯像素＝2），即使是6plus出現了，iphone到底其實也就只有2，3這兩個dpr。其實6plus的實際dpr並不是整數，而是2.87左右，不過，為了方便開發者來開發，iphone6plus對其做了一個調整，將dpr調整為3，然後在對屏幕進行了一個縮放。所以我們很容易對其做到兼顧。
而安卓的dpr值，並不像iphone那樣就只有兩個值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我還看到了1.7之類的，安卓的各個設備商，玩的真尼瑪high啊。怎麼高興怎麼來。）
那麼現在開始說說移動端怎麼布局以及字體該怎麼設置，因為有各種各樣的解決方式，我就不一一贅述，直接說手淘的解決方案：flexible.js
我為什麼又一次把這個拿出來說，主要有兩點原因：1.我覺得它好用，解決方式簡單粗暴。2.它經過了比較長時間的考驗，如今手淘還在用它。
具體的使用方法自己可以去flexible.js看看，這里我簡單說說它的方案以及個人對它的改良。
Ⅳ h5頁面製作，設計多大的尺寸，怎麼和前端適配，實現設計的視覺稿效果
H5的頁面製作設計尺寸是有一定規范的，正常的話是考慮手機的適配問題，所以這個尺寸的話是基於手機來做的。
具體是多少呢？因為手機的尺寸是不一樣的，特別是在比例上，這就要求我們在不同的手機上必須要保證內容的呈現，一定是完整的，但自己要考慮一個問題，要把內容分為重要的和不重要，重要的是什麼呢，比如說背景圖；重要的話就是放一些文字信息等等。
這樣就劃分了一個安全區和出血區，出血區和安全區交界的部分，就是不重要的，可以在各位手機上被裁掉的或者用來遮住手機頁面背景的；但是安全的內容，是可以保證在任何大小屏幕手機上都可以完整顯示。
一般安全區內框的尺寸是375X603PX，但在製作上又是另外一回事了，作鋪滿內框的圖要按照這個尺寸的2倍大小去做。
出血區也就是外框尺寸是422X748PX，作鋪滿外框的圖要按照這個尺寸的2倍大小去做。
這個你可以參考下意派Epub360的畫布標准，這個工具是專業級的H5工具。
Ⅳ 前端用easyui寬架做的，有辦法適應手機屏幕嗎
不能很簡單的適配
現在的前端設計如果要同時適配PC和移動（手機、pad），是在設計階段就考慮好的，核心也不是js，而是css。
你的easyui前端既然已經開發好了，那肯定當時是沒考慮適配的，現在改成通用的比單獨做一套移動的還麻煩。
Ⅵ 手機問題需要三方適配解決是什麼意思
移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。
適配問題產生的原因，手機設備屏幕尺寸不一，做移動端的Web頁面，需要考慮在安卓/IOS的各種尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現怎樣做能更好地適配不同屏幕寬度的移動設備。
適配的目標：在不同尺寸的手機設備上，頁面相對性的達到合理的展示（自適應）或者保持統一效果的等比縮放。
Ⅶ 前端解析度適配
現在手機屏大小不一，而且屏幕硬體性能也各不相同，一般的UI設計都是基於特定機型畫設計搞件的，常見的是基於iPhone6的解析度設計2倍圖，以iPhone6為例，屏幕物理像素寬度是750，網頁寬度為375PX。開發中還要根據不同手機留出設計餘量，因為不同解析度的手機顯示時會有拉伸位移。
網上也有一些方案，處理高清屏適配方案，但一般也只把DPR適配到2，彩用所有長度單位放大2位，網頁整體縮放50%的的做法，比如ant-mobile就支持這種方式，它可以定義一個less常量「@hd」來定義CSS中使用的基礎單位大小，但是這種方式在遇到網頁實際寬度大於375的設備時，還是不能1：1的還源UI設計稿。
我個人在項目中採用的是更復雜的實現方式，可以實現適配DPR大於2的手機屏，並接近100%的還源UI設計稿。具體的適配技術各家大同小異，這里不再細說，我只給出我自己的適配方案。
同大多數適配方法一樣，通過 rem 設計一個基礎的大小單位 ，做為整個頁面的基礎單位，再根據屏幕物理DPR結合屏寬計算這個單位的大小，
基礎單位 = 屏幕DPR * 網頁寬度 / 375（設計稿基準為375）
網頁縮放值 = 1 / 屏幕DPR
比如我的方案是把rem設為10px 再乘以「基礎單位」，這樣在設置一個設計稿上14號字的時候，就寫 1.4rem就可以了。另外編寫頁面布局時，也用這個計算出來的相對單位，這樣可以做到不管什麼樣的屏幕，UI設計搞都不會因寬度變化而變形。另外，如果使用ant-mobile這樣的支持高清方案的UI中間件，直接在配置中把它的LESS常量 「@hd」設置 為 「0.1rem」就可以了。
另外還有一個小的福利，就是在這個方案下，當你想畫出「1物理像素」的細邊框時，直接用 「1px」，就可以了，因為在這個方案下，1px對應的是一個物理像素。
下面給出我實踐中使用的適配代碼：(這是直接放在HTML文件中的版本）
//計算屏幕比例並設置html的font-size
/**
將html字型大小設置為10個設計像素（一個基準系數，即rem為10 設計稿像素）
設計一個縮放系數，以應對可能出現的適配高清屏要求
*/
( function () {
/**初始化方法
* _standard 設計稿對應的解析度
* base_DPR 設定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得當前設備DPR
var dpr = window. devicePixelRatio || 1;
//如果設定了默認最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//設定縮放視圖比例
var scale = 1 / dpr;
//設直視圖縮放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得當前設備寬度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//標定原稿設計基準值 當前稿件設計寬度為 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//設定基準單位
var base_value = 10;
//基準系數=設備寬度➗稿件基準寬度✖️設備DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//設置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
Ⅷ 做個手機頁面怎麼才能適配不同的手機
一般來說，iH5的手機案例默認的尺寸是640*1040px，也就是iPhone6 plus的尺寸，我用的正是iPhone6 plus，所以我做案例時沒出現過這類問題，而你遇到案例呈現不完整的情況我想應該是手機型號的不同導致的。
你可以設置舞台或者設備的屬性，舞台裁剪為no，如果用的是短款手機觀看作品，有滾動條也可以看到完整的案例。
如果你想要實現完美適配，可以做三個設備，寬度均為640，高度可設置為1040（iPhone6 plus）、1008（iPhone5s和大部分Android手機）、832（iPhone4s）。
希望我的回答對你有幫助
Ⅸ 什麼是移動適配
移動適配是指使不同尺寸的手機設備頁面「相對性的達到合理的展示（自適應）」或者「保持統一效果的等比縮放。手機設備屏幕尺寸不一，做移動端的Web頁面，需要考慮安卓/IOS的各種尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現更好地適配不同屏幕寬度的移動設備。
(9)前端適配不同手機擴展閱讀：
完美的移動適配不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容；顯示的文字、圖片等其他元素大小合適，無論是在何種密度屏幕，何種解析度下，顯示出來的大小都是差不多的。
適配不同屏幕寬度以及不同dpr，通過動態設置viewport(scale=1/dpr) + 根元素fontSize + rem, 輔助使用vw/vh等來達到適合的顯示。
若無需適配可顯示1px線條，也可以不動態設置scale，只使用動態設置根元素fontSize + rem + 理想視口。