手机端活动页面打造步骤:

一、确定图片尺寸

分析:

   1.苹果最大的分辨率宽度是960px,所以图片宽度建议制作成960px(480px)、640px(320px)和就可以适应所有苹果手机,括号中的宽度代表图片做成实际像素的二分之一大小也可以正常显示。如果图片清晰度要求高960px通吃,要求不高480px通吃。 

   2.安卓最大的分辨率宽度是1080px,所以手机图片的宽带建议制作成1080px(540px) 800px(400px) 720px(360px) 480px(240px),括号中的宽度代表图片做成实际像素的二分之一大小也可以正常显示。如果图片清晰度要求高1080px通吃,要求不高540px通吃。 

 结  论: 如果想通吃全部机型,想高清显示1080px,想节约用户流量540px,用CSS让图片自适应宽度就ok。CSS让其自适应宽度写法:width:100%;text-align:center; 。

备注:如果单纯的做一张手机端海报,图片尺寸标准可以控制到 720 *350像素

二、页面代码兼容性

为了让手机端兼容显示,要在头部加上以下代码,以下代码的作用是手机端自适不会缩放,滚动条等样式兼容。 

《meta http-equiv="Content-Type" content="text/html; charset=gbk" /》标题乱码字符集就改为  utf-8
《meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /》
《meta content="yes" name="apple-mobile-web-app-capable" /》
《meta content="black" name="apple-mobile-web-app-status-bar-style" /》
《meta content="telephone=no" name="format-detection" /》


在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

其中能缩放:

《meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />》
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例

 这样子写后,就可以把一些页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

个人微信号

微信扫一扫联系我

发表
评论
返回
顶部