移动端web开发常见问题

《移动端web开发常见问题》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、移动端web开发常见问题常见问题1、移动端如何定义字体font-family三大手机系统的字体：ios系统默认中文字体是HeitiSC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android系统默认中文字体是Droidsansfallback默认英文和数字字体是DroidSans无微软雅黑字体winphone系统默认中文字体是Dengxian（方正等线体）默认英文和数字字体是Segoe无微软雅黑字体各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字

2、体和数字字体可使用Helvetica,三种系统都支持*移动端定义字体的代码7body{font-family:Helvetica;}2、移动端字体单位font-size选择px还是rem对于只需要适配手机设备，使用px即可对于需要适配各种移动设备，使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备rem配置参考：html{font-size:10px}@mediascreenand(min-width:480px)and(max-width:639px){html{font-size:15px}}@mediascreen

3、and(min-width:640px)and(max-width:719px){html{font-size:20px}}@mediascreenand(min-width:720px)and(max-width:749px){html{font-size:22.5px}}@mediascreenand(min-width:750px)and(max-width:799px){html{font-size:23.5px}}@mediascreenand(min-width:800px)and(max-width:959px){html{fon

4、t-size:25px}}@mediascreenand(min-width:960px)and(max-width:1079px){html{font-size:30px}}@mediascreenand(min-width:1080px){html{font-size:32px}}3、什么是Retina显示屏，带来了什么问题retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点rtl1个变为多个,如在同样带下的屏幕上，苹果设备的retina显示屏屮，像素点1个变为4个在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的

5、视觉稿通，设计为传:PC的2倍那么，前端的应对方案是：设计稿切出来的图片氏宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2〃例如图片宽高为：200px*200px,那么写法如下.css{width:100px;height:100px;background-size:1OOpx10Opx;}其它元素的取值为原来的1/2,例如视觉稿40px的字体，使用样式的写法为20px.css{font-size:20px}4.viewport模板

6、8H>

7、nit>vtitle>标题v/title>这里开始内容5.优先使用最新版本IE和Chrome6.添加到主屏后的标题(IOS)

8、content』标题、7.启用WebApp全屏模式(IOS)当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果