⑴ 移动web和web有哪些区别
移动web和web有哪些区别体现在以下几点:
1.比如说具体的应用在不同地方的形态。
一款计算器：
web app： 其实就是在网页上的应用。这个很广泛，只不过大家平时都不这么叫而已，你在 网页上使用一款计算器都可以称作web app。
mobile web app：额，就是能在手机浏览器中打开使用的计算器，只不过根据手机的屏幕，调整了 自己的按键大小，布局等等。
mobile app： 你在应用商店下载了一个计算器。
2.比如说如何用代码编写：
web前端：
基本上就是html+css+javascript。至于html5，css3什么的就是具体到你应该用什么规则的代码去写了。这个如果楼主想要入门学习的话，推荐w3school 在线教程（中文）。
mobile web 前端：
其实还是那套东西，但是加入了一个叫做响应式设计的东西。而且据我了解，这个概念还要从html 5标准的普及说起，说通俗点就是屏幕多大的时候布局，字体是什么样的。网上有很多前端模板都提供了这个功能。比如比较火的Bootstrap中文网（中文）深层次点，比如通过html5的API调用手机的硬件等。
mobile 前端：
这个目前还分两大阵营，一个是Android，一个是iOS。而且就我的了解，web前端有专门的岗位叫前端攻城师，但是很少听说过只写mobile前端的移动工程师，至少我至今没有听到过。
Android：
静态的话就是xml，动态的话就是android的layout那堆东西。
https://developer.android.com/guide/topics/ui/declaring-layout.html(可能需要翻墙)
比较简单的layout，比如:
Linear Layout(可能需要翻墙)
FrameLayout | Android Developers(可能需要翻墙)，想学习的话可以参考下。
还有一些动画效果。
https://developer.android.com/guide/topics/graphics/index.htmll(可能需要翻墙)
当然，提到Android的UI，不得不提的是那坑爹的适配。只能说，学习Android UI需谨慎。
iOS：
UIKit那套东西，其实现在感觉如果不是太复杂，.xib直接拖界面也还可以。UIKit Framework Reference 。storyboard就算了，不是太推荐。简单的页面还可以，想试也可以试试。反正我用的不是很舒服。当然还有一些动画效果。Graphics and Animation
3.比如说其他区别：
其实最显着的区别就是，web app是不依赖于具体的设备的，通用性较强，只要手机或PC有相应内核的浏览器就基本OK。而mobile的app则依赖于具体的设备，一旦更换设备，需要重新下载才能继续使用。
⑵ web UI 和移动UI的区别以及联系
一、用户与界面交互/操作的方式不同
Web网站：以鼠标或触摸板为媒介，多采用左键点击的操作，也支持鼠标滑过、鼠标右键的操作方式。
移动App：直接用手指触控屏幕，除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势。
设计要点：
1、相比鼠标，手指触摸范围更大，较难精确控制点击位置，对此iOS人机交互规范中提到手指最合适的触控区域至少需要44 point。所以移动App的点击区域要设置的更大一些，不同点击元素的间隔也不能太近。
2、Web网站支持鼠标滑过的效果，一些tips提示通常采用鼠标滑过展开/收起的交互方式。在移动App则不支持这类效果，通畅需要点击特定的icon来收起/展开提示。
3、移动App支持的丰富的手势操作，比如通过左滑可看到你可能需要的快捷操作“取消关注”、“删除”，这类操作方式的特点是快捷高效，但对于初学者来说有一定的学习、获知成本。我们在合理设计这些快捷操作方式的同时，还需要支持最通用的点击方式来完成任务的操作路径。针对手势操作学习成本高的问题，一些App常通过新手引导的方式来教用户。
4、移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
二、设备尺寸不同
Web网站：不同PC的分辨率不同，浏览器窗口最大化的尺寸也不同；浏览器窗口可缩放。
移动App：设备尺寸相对较小；不同设备的分辨率差异化较多，特别是Android；支持横屏、竖屏调转方向。
设计要点：
1、移动App的尺寸较小，一屏展示的内容有限，更需要明确哪些信息更为重要，有效的“组织”相关联的内容，优先级高的内容突出展示、次要内容适当“隐藏”。
2、Web网站因浏览器分辨率差异较大、且窗口尺寸可变化，设计时需要确定好不同分辨率的内容展示和布局，也因为这一点加上webapp的浏览需求，近几年来响应式设计更为普遍。
3、因设备分辨率、dpi大小不一，所以移动App在界面布局、图片、文字的显示上，要兼顾不同设备的效果，需要设计师与开发共同配合做好适配工作。
4、因移动设备支持横屏、竖屏展示，所以在设计移动App（比如游戏、视频播放界面）时，需要考虑用户是否有“换个方向看看”的需求、哪些情况下切换屏幕方向、如何切换等。
三、使用环境不同
Web网站：通常坐在某个室内、使用时间相对较长；
移动App：既可能是长时间在室内使用、也可能是利用碎片化的时间使用，或站或坐或躺着或行走，姿势不一；
设计要点：
1、使用Web网站时，用户更为专注；
2、使用移动App时，用户很容易被周边环境所影响，对界面上展示的内容可能没那么容易留意到；长时间使用时更适合沉寂式浏览，碎片化时间使用时用户可能没有足够的时间、每次浏览内容有限，类似“稍候阅读”、“收藏”等功能则比较实用；用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从错误中恢复。
四、网络环境不同
Web网站：网络相对稳定且基本无需担心流量问题
移动App：因用户使用环境复杂，可能在移动过程中从通畅环境到封闭的信号较差的环境，网络可能从有到无、从快到慢；既可使用无需担心流量的WiFi，也可能使用需要控制流量的3G/4G。
设计要点：
1、移动App，网络异常的情况更普遍，需要更加重视这类场景下的错误提示、以及如何从错误中恢复的方法。
2、移动App，在3G/4G情况下用户对流量比较重视，对于需要耗费较多流量的操作，需要提醒用户，在用户允许的前提下才继续进行。
五、通知方式不同
Web网站：对于浏览器的通知中心，用户使用的不多，很难主动唤起用户
移动App：推送通知给用户的方式很常见。
设计要点：
1、在移动App可以用通知及时提醒用户一些重要信息，但也需要考虑用户关闭通知提醒的场景下用户仍然能无碍的使用；因为“通知”功能对用户较为重要，设计师需要思考如何让用户更容易“开启通知权限”。
六、基于位置服务的精细度不同
Web网站：定位功能一般获取到的是当前城市
移动App：可较为精确的获取用户的当前位置
设计要点：
1、移动App可合理的利用用户的位置，给用户提供一些服务。比如，地图类可以搜索“我的位置”到目的地的路线，生活服务类可以查询我的位置附近的美食、商场、电影院等等，这样的方式省去了用户手动输入当前位置的复杂、更加智能化。
⑶ 手机移动web开发 如何做到控制页面大小不变
手机的屏幕有大有小，移动web最好做成响应式布局，也就是自适应屏幕，没有固定宽高，这样的话，在所有手机上都可以正常显示。ico的话可以使用字体图标，现在大部分手机浏览器都支持html5和css3的。
Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过7年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
⑷ 如何做一个移动web页面，用Jquery Mobile 吗
方法/步骤1简单的说明一下JQueryMobile.它是一个很好的跨平台的移动端网站开发框架。是一个前台的框架。现在要使用这个框架组一个界面，这个界面很简单，但是麻雀虽小五脏俱全，然后模板实现，知识讲解完毕。html要使用HTML5的标准来写，因为JQueryMobile是基于HTML5的。书写html5的格式如图，2既然使用JQueryMobile就要有这个框架，这里可以使用本地引用的方式，和网上引用，也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。这里使用cdn的方式，这样只要可以上网就可以使用该框架。3在写移动端的网站的时候，一定要写一个meta的name为viewport的属性，因为该属性代表着网站页面的自适应。简单的写法为：代表着网站为驱动设备的宽度。4然后加入框架之后，写一个简单的界面。这里面JQueryMobile大量的使用了一个data-的属性，这里使用最多的事data-role。代表着他默认的样式规则。就是提前定义好了很多的样式来供你使用。常用的page.代表着页面，listview，代表着一个列表视图。下面是代码和效果图5稍微说明一下。data-role="page"是代表着一个页面可以看做该内容下是一个页面显示的内容data-role=”header"代表着页面的页头，就是页面的最上面显示的内容这里需要注意，里面要加上子标签内容，要不然，就不会居中显示内容了。推荐使用h1.data-role="footer"代表着页脚的内容。也是网站的一个说明信息。或者是一个底部导航菜单。还有一部分，就是data-role="content"是代表着页面内容部分，主要的内容在这里面显示。这3个部分构成了一个简单的页面。所以，现在可以体验到它的强大，不用写太多的代码一个简单的框架就好了，下面继续增加一个listveiw的列表视图。6完成列表视图的代码，增加一个文章列举表的代码，这里列表是使用data-role="listview"来修饰样式。然后这里只需要加上data-role="listview"你发现想要的list效果就实现了。这样我们一个简单的页面效果就实现了。一个简单开发例子
⑸ 移动光纤猫 设置 IP web界面
光猫是没有WEB设置界面的， 只有路由能设置， 光猫只负责光电转化，其他都得有路由和电脑完成，就是你说的电信的进去，也只是说进入了电信的路由或者服务器，不是进的光猫1！
⑹ 移动web终端 viewport设置
移动web，顾名思义就是在移动端的web页面，比如我们可以在手机的UC浏览器中访问淘宝等网站：
可以发现淘宝的移动web版本和pc上web版本有很大的不同，在移动web版本中更像是模拟了native应用中的页面。所以移动web的开发和pc上web的开发肯定也是有很大的不同。
先看正常的pc上web页面在移动设备上的展示：
从上图可以看出，正常PC上的网页在移动设备被缩放了，这样对于商城购物类的网站来说，用户体验非常差，所以就更应该要有适配移动设备的页面了。
那么究竟是怎样适配移动端的页面呢？答案就是viewport，可以将viewport理解为浏览器中用来承载网页的那一层。默认情况下移动设备上浏览器会自动将viewport的值设置为980px或者1024px，不过手机的屏幕没有那么大，这时候网页就缩放了。
到这里，web适配移动设备的方案就出来，让viewport=手机的宽度就好了。是的，正常情况下都是这么用的：
在meta标签中设置viewport的宽度为设备的宽度， initial-scale=1 的意思是页面的缩放比例为1， user-scalable=no 的意思是禁止用户缩放页面， minimum-scale=1,maximum-scale=1 的意思是设置用户的最大最小缩放比，当设置了 user-scalable=no 之后这两个属性值就没有意义了。
以上就是viewport的主流设置，不错淘宝（m.taobao.com）就是非主流的设置，淘宝的移动web页面中viewport没有设置宽度：
所以淘宝的viewport的width应该是用js动态获取的。
⑺ 移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]
移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
早期网页设计采用 静态布局 ，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 标签中的 viewport 标签中设置 width ，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。
后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。
上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。
[TOC]
像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。
印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。
在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)
像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为： ，其中 和 是分辨率的宽高， 是屏幕尺寸。
打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。
设备物理像素和设备独立像素比 ，即 是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。
<meta> 标签中定义了一些元数据信息，通过设置 <meta name = "viewport"> ，提供有关 视口初始大小 的信息，供 移动设备 使用。属性值为
移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。
与移动端web页面适配有关的手机屏幕特性包括
硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。
设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。
像素分辨率 ÷ 逻辑分辨率等于 倍率 ，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。
手机屏幕对角线长度换算成英寸的大小
贴上 源码 分析
视口 是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口
使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本 ， 布局高宽 ， 间距 等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为
响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。