手机版网页

主要工作是把UI的设计图按照w3c标准做成html页面，并且用javascript脚本语言实现页面上的前端互动。互动效果包括，弹出层，页签切换，图片滚动，ajax异步互动等。　　高级前端工程师还要承担前端优化的工作，优化的知识就会一些，比如文件过期Expires，缓存，异步缓存，js和css以及图片的压缩等。　　前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思 考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息。简单地说，它的主要职能就将网站的数 据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。　　前端工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由WEB1.0到WEB2.0，再 到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于哀前端技术实现的应用、交互和富媒 体的呈现，的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。网站的开发对前端的需要越来越重要，但目前前端工程师需求远大于供给，前端人才非常紧缺。所以高质量的前端开发工程师将会是后五年内一个非常热门的职业，发展的前景非常可观。

　　最近有一些客户咨询网站自适应的相关问题，不了解这些方面的合作商存在诸多疑问，小编整理相关回答有以下几点内容：　　一、网站自适应优点如下：　　1、更少维护　　开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。　　2、积累分享　　响应式网站设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。　　3、用户友好　　响应式的网站设计能够对用户产生友好度，并且对于不同的分辨率能够灵活的进行操作应用。同时还可以进行收集分享，我们可以通过网站中这些单一的网站URL地址把那些社交分享链接收集起来。　　二、缺点如下：　　1、时间花费　　开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时。如果你想要一个响应式网站，最好从草图开始重新设计。　　2、优化难　　对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。　　3、布局不好控制　　响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。　　随着移动设备的发展，越来越多的网页开始采用自适应网页设计技术，极大的提高了网页的用户体验，因此对seo起到催进作用，那么自适应网页设计技术对seo的促进作用主要表现在如下几个方面。　　1、由于采用自适应网页设计技术，网页显示效果更好，极大的提供了网页的显示效果，提高了用户浏览效果，进而提高了用户体验，我们做seo的目的就是提高用户体验，因此催进了seo的效果，提高了网站关键词的排名。　　2、过去需要几个页面解决的问题，现在一个页面就可以解决，提高了seo的整洁程度，减少了seo页面的代码冗余。　　3、可以减少重复内容，有利于seo关键词的排名。　　4、有利于搜索引擎识别，抓取，索引，网站质量的判断等。　　综上所述采用自适应网页设计技术对seo还是有很多催进作用的，至少没有什么副作用，如何是新建网站或者是网站改版，还是尽量采用自适应网页设计技术对seo还是有一定作用的。　　应用响应式网页设计，可以使我们不必针对具体设备或屏幕编写单独的网页，不需另建单独的网址，一个页面适用于所有的设备，即自适应功能。做响应式网页时，可以自动识别屏幕宽度、并做出相应调整的网页。如今，这种响应式网站设计已经成为时代的潮流了。

这个不同手机尺寸不一样，比如iphone3 320*480 iphone4 640 * 960 android 240*320 320* 480 480* 854 这些比较常用，还有一些其他分辨率看你具体是针对什么手机做的了！ 哦 谢谢你啊 我就是想做一个手机网页的作品 现在就是分不清楚这尺寸问题好困扰我啊 呵呵 那意思就是说 我要做个安卓的 那分辨率是72 这些尺寸都可以用240*320 320* 480 480* 854 ？ 不是都可以用，是你针对多大屏幕的手机做的，那就用它相应的分辨率！ 如果只是做作品，不考虑兼容性，那就按照480的那个做吧，反正现在用大屏幕的手机的人多！

工具/原料html页面vs2008步骤：1、点击【文件】【新建文件】【常规】【HTML页面】【打开】2、如图所示，新建了一个空白的html页面，拆分视图3、设置页面body样式信息【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】是防止用户复制和保存图片,只支持iphone、ipad、android4、设置页面的宽度和高度【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】5、【关键点】新建一个div标签，样式使用page-content6、在段落标记<p>里面输入文字信息，这里天使就不排版了，主要是教大家方法，然后保存网页。7、将网页上传到服务器目录下8、输入网站域名，在电脑上访问可以看见效果，只有左侧部分9、使用手机访问，得到如图所示效果，就不会像直接书写html代码一样文字很小

做移动UI设计的设计师肯定都知道，移动客户端的界面上做效果的时候提前找所用的字体，特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别。　 项目开始时，设计师可以提前和开发沟通好，就是告诉开发字体和字间距之类的需要自定义，请程序提前做好“准备”(一般字体和字的效果程序都是可以提前封装后，整个项目都可以导出自定义)，如果提前沟通，这样会提高开发和设计的UI界面的效率。确实是这样啊。特别是刚进入APP UI 界面设计的设计师，容易犯的一些错误!　　Heiti SC：黑体-简，黑体-简的英文名称为Heiti SC　　Heiti：黑体的拼音，SC代表简体中文(Simplified Chinese)，是Mac OS X Snow Leopard(版本10.6)包含的简体中文字型，也是iPhone OS 3.0(版本4.0后改名为iOS)及iPod nano第五代以来的预设简体中文字型。　　黑体-简系：为黑体，取代华文黑体成为Mac OS X Snow Leopard的预设简体中文字型。在过去，华文黑体是Mac OS X的预设简体中文字型，因此以前并没有黑体-简。　　黑体-简：是全新的字型，与黑体-繁同以华文黑体为基础开发，成为Mac OS X Snow Leopard与iPhone OS 3.0(版本4.0后改名为iOS)之后内建并同时为预设的简体中文字型。虽与华文黑体为两套字型，但差异微小，仅排列上有差距，笔画的差距也十分微小。包含“细体”与“中黑”，黑体-简与黑体-繁皆使用.ttc(TrueType Collection)格式，可以在单一档案包含多套字型。其中，黑体-简与黑体-繁的细体在/System/Library/Fonts /STHeiti Light.ttc，黑体-简与黑体-繁的中黑在/Library/Fonts/STHeiti Medium.ttc。　　在ios中默认字体分为三类：　　第一类：STHeiti-Light.ttc （黑体-简与黑体-繁的细体）和 STHeiti-Medium.ttc（黑体-简与黑体-繁的中黑） 代表的是中文字体，常用的方正黑体简体　　第二类：_H_Helvetica.ttc 和 _H_HelveticaNeue.ttc 代表的是英文以及数字字体，常用的字体Helvetica　　第三类：LockClock.ttf 代表的是锁屏时间字体

打开卖家中心，选择出售中的宝贝或仓库中的宝贝，点击编辑宝贝；2.下拉到手机端描述，点击使用神笔模板编辑；3.进去后如果还没有模板就根据你的类目去找一个模板；4.找好模板后把原有的图片删掉；5.然后点击空白处，再点击左上角的添加热区按钮；6.选择宝贝，确定；7.点击空白处，再点击左上方添加图片；8.选择和链接宝贝一样的图片，确定，最后把热区拉开！

打开卖家中心，选择出售中的宝贝或仓库中的宝贝，点击编辑宝贝；2.下拉到手机端描述，点击使用神笔模板编辑；3.进去后如果还没有模板就根据你的类目去找一个模板；4.找好模板后把原有的图片删掉；5.然后点击空白处，再点击左上角的添加热区按钮；6.选择宝贝，确定；7.点击空白处，再点击左上方添加图片；8.选择和链接宝贝一样的图片，确定，最后把热区拉开！

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)Note2 360 * 567 (未隐藏URL与状态栏)iPad 3/4 768*928 (未隐藏URL与状态栏)GALAXY SIII 360 * 567 (未隐藏URL与状态栏)米2A 360 *567 (未隐藏URL与状态栏)HTC G10 320 * 460<meta name="viewport"网页手机wap2.0网页head加入面条元标签iPhone浏览器页面原始显示并允许缩放 <meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> width - viewport宽度 height -viewport高度 initial-scale - 初始缩放比例 minimum-scale -允许用户缩放比例 maximum-scale -允许用户缩放比例 user-scalable - 用户否手缩放参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/、网页手机wap2.0网页head加入面条元标签iPhone浏览器页面原始显示并允许缩放<meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">其： width - viewport宽度 height - viewport高度 initial-scale -初始缩放比例minimum-scale - 允许用户缩放比例 maximum-scale - 允许用户缩放比例user-scalable -用户否手缩放c二、关于meta详细介绍请参考三、文关于Meta例详细介绍 原文址3. Meta元素视区　　默认情况iPhoneSafari象屏幕桌面浏览器显示页面宽度达980像素缩内容适应iPhone屏幕用户iPhone看页面觉字体比较比较模糊必须要放才能看真切于普通Web页面似乎接受于用应用程序没几能够受　　幸运使用特殊Meta元素视区进行纠：<metaname="viewport" content="width=device-width"/>　　元素通知浏览器使用设备宽度作视区宽度默认980像素我看看两同例　　例3(链接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)显示简单段落元素没Meta元素视区字体点模糊iPhone运行实际情况图所示图 1 视区显示效　　例4(链接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括视区元素现设备宽度320像素字体比前例更清晰iPhone运行实际情况图所示图 2 视区显示效　　另外手设置device-width值例假设博客页面宽度750像素桌面屏幕佳800x600像素例5(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)显示删减版本iPhone浏览看980像素剩空间都填充白色　　消除额外空间使用meta元素视区宽度设780像素：<metaname="viewport" content="width=780"/>　　例6(链接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示meta元素视区布局固定效　　Meta元素视区内容包括逗号隔值initial-scale –用户初看页面放级别于Web应用程序见设置：<metaname="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>　　元素设置宽度设备宽度禁止用户放缩