Ⅰ 前端工程师遇到要做移动端页面的时候，给了我一张设计图，怎么去切图，那么多的手机要适配
用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 + 理想视口。