真人线上国际
service phone

0566-88666668

<
>
联系我们

0566-88666666

中国杭州

技术案例中心 您的位置: 主页 > 技术案例中心 >

手机wap前端开发经验

发布人: 真人线上国际 来源: 真人线上国际 发布时间: 2021-01-13 13:40

  我们要兼容的浏览器至少有二十种情况(手机自带浏览器和用户可安装的浏览器)。

  由于不同手机的颜色深度不一样,有的手机4096色,有的则1200w色,为了向下兼容颜色深度较少的手机,我们在UI设计的时候尽量简单为主,减少渐变特别是大范围的渐变色块的出现,避免在颜色深度不足的手机上出现颜色分层现象。

  由于不同手机屏幕尺寸差异性较大,有180×120分辨率的,也有540×960分辨率的,所以在设计上应该尽量采取简单布局,尽量少出现左右布局,因为在wap2.0站点上面 左右布局是做不了自适应的

  以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征、手机,但并不代表所有手机的情况

  虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

  在实际开发中,我们使用标签可以算是少了很多很多的选择了,因为,在调试中发现

  这个影响的有,我们在web网站中用在列表,导航中的 ul li 结构 不得不用其他结构替换掉。

  这个问题出现在nokia手机上面,页面做出来之后在nokia 5800 s60 v5系统上面发现出来之后整个页面显得很小,320×480分辨率导航文字部分只占到手机屏幕宽度的一半左右,在百思不得其解之后,只好参考其他同类型网 站,发觉 激动网的 wap版本 用了个viewport 属性,并把页面的初始大小为原来的1.4倍,即

  这样 nokia 的 塞班用户 与 高端智能手机如AndroidiOS用户就能看页面清晰些大些,而低端用户由于不支持 viewport属性,所以没影响。

  以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征、手机,但并不代表所有手机的情况。

  “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;

  “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;

  “background-position”属性:但背景图片的其他属性设定是支持的;

  “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;

  在进入实际开发的时候,我发现其实还有一部分的手机不支持 float 属性,超级郁闷!

  在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级

  前端开发使用自己手机作为初始测试平台的童鞋们,我建议你们安卓uc浏览器7.9,这样基本上可以将你高端手机很优雅地变为半高端手机,能测出低端手机常见的bug出来。

  Opera Mobile Emulator来进行模拟,效果比较理想,要注意的就是当前页面的颜色深度, Opera Mobile Emulator 上的颜色深度直接是取电脑上的颜色深度,这个是和真机是不一样的。

  然后就是关于手机上测试时令人抓狂的缓存问题,我建议为你修改过的样式文件,js文件给个版本号来减轻缓存的影响。

突尼斯赌场
版权所有©杭州 突尼斯赌场 通信技术股份有限公司
突尼斯赌场 京ICP备17049943号 网站地图