手机页面尺寸问题

HelloBitches 2017-11-07 03:45:42

百度了一下，发现设计稿(PSD)大都是遵循640或者720的标准，但是这样的效果图出来后前端切图要怎么处理呢，真实的手机宽一般都是320，360，414这样的，设计稿的标准是640或者720的话，它里面的具体的元素(比如说按钮)的尺寸如果放到真实手机上肯定是看上去很大的，各位同行的朋友你们是怎么解决这种问题的呢

...全文

549 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

daydayUp. 2017-12-15

打赏
举报

回复

移动端先加入 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ，然后特别注意，在你需要图片的地方 1.小图标，可以设置为标签背景，设置背景大小，标签大小 2.图片，display:block;width:100%,百分之多少你自己定

amber053 2017-12-13

打赏
举报

回复

切图的时候注意选择好设计稿的分辨率，有一些切图工具会自动生成不同分辨率的图片，在加载的时候自动加载相应分辨率的图片

根子的数据库 2017-11-14

打赏
举报

回复

按照百分比来现在手机屏幕尺寸太多了你可以设置一个最小的宽度min-width=320px;另外在设置一个最大的宽度max-width=640px;然后页面div宽度100%

天际的海浪 2017-11-07

打赏
举报

回复

可以 <meta name="viewport" content="width=640"> 强制页面width为640

HelloBitches 2017-11-07

打赏
举报

回复

还有就是字体大小怎么处理

通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习，可以学到如下内容：①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等）；②WEB网站页面性能测试策略；③WEB网站页面加载过程（前端基础语言：HTML+CSS+JavaScript，DOM、CSSOM、渲染树、布局、绘制）；④WEB网站页面性能测试工具的实际操作和功能介绍（开发者工具：控制台、网络、性能、Lighthouse、FPS渲染统计等）；⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容：第一章：课程简介1、课程介绍2、课程大纲第二章：页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章：页面加载过程1、HTML概念，HTML5实例，HTML5文档2、CSS概念，CSS实例，CSS文档3、JavaScript概念，JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程，HTML渲染树第四章：页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章：页面性能测试工具-控制台：window.performance1、控制台：window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章：页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章：页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章：页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章：页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章：页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章：网速调研1、全国网速的调研和本机网速测试第十二章：页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤

手机页面尺寸设置的一些方法HTML5参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。其中： width - viewp...

直接正题了 1. 页面尺寸的查看：直接打开控制台（f12或者右键然后检查）；调整页面尺寸时右上角会有提示页面的尺寸 2. 控制台的位置调整：打开控制台后有dockside（chrome浏览器）然后点击后就可以调整了就是下图这个样子有四种位置可以选择 3. 手机端页面浏览其实就是两个按钮的位置如下图（一个是页面选取后可以找到指定元素，一个就是手机端尺寸的网页浏览） ...

使用axure原型图手机界面尺寸制作的原型，如果你没有设置自适应视图的话它是不会自动适应任何设备的。若要解释清楚这个问题需要的篇幅比较长，请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再赘述，直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure 中设置大小即可，设计完毕后在生成 HT ML时设置手机 /移动设备中勾选包含视图接口...

一般情况下，以现有市场上流行的移动智能手机，单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136，在高度为812处设置一条安全线(参考线)，将重要的内容布局在这条安全线之上。手机端H5页面的设计稿尺寸大小规范内容如下：1、像素是没有宽高的(不要被Photoshop中的像素格欺骗)，它只代表一个采样的色值。2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图...

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章