前端面试题，移动端兼容问题都有哪些，安卓和ios问题？

Posted 2023-03-14

那么进入正文，不废话，直接把自己了解到的和一些看法说出来。
首先是屏幕问题，现在主流的移动设备以安卓和ios为主，我们在制作移动端页面也是以兼容这两种设备去布局。
首先说iPhone，不得不说iPhone的屏幕考虑到了我们开发者的难处，从而给出iPhone屏幕的dpr都是整数值，在6plus出现之前，iphone的dpr始终是2（物理像素/逻辑像素＝2），即使是6plus出现了，iphone到底其实也就只有2，3这两个dpr。其实6plus的实际dpr并不是整数，而是2.87左右，不过，为了方便开发者来开发，iphone6plus对其做了一个调整，将dpr调整为3，然后在对屏幕进行了一个缩放。所以我们很容易对其做到兼顾。
而安卓的dpr值，并不像iphone那样就只有两个值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我还看到了1.7之类的，安卓的各个设备商，玩的真尼玛high啊。怎么高兴怎么来。）
那么现在开始说说移动端怎么布局以及字体该怎么设置，因为有各种各样的解决方式，我就不一一赘述，直接说手淘的解决方案：flexible.js
我为什么又一次把这个拿出来说，主要有两点原因：1.我觉得它好用，解决方式简单粗暴。2.它经过了比较长时间的考验，如今手淘还在用它。
具体的使用方法自己可以去flexible.js看看，这里我简单说说它的方案以及个人对它的改良。 参考技术A 建议你搜一下这几个meat
我自己整理的一些关于手机端显示web 的适配,关注点在于viewport 即,如何让浏览器展现网站内容并如何设定web宽度.viewport 这个属性web端很重要,不知道是不是你要的内容,还有很多其他的针对设定,可以自行搜索一下meat 手机端的针对属性
1: apple-mobile-web-app-capable (是否隐藏苹果手机工具栏和菜单栏)(是否苹果手机全屏)
No:默认样式,不隐藏
Yes:屏蔽工具栏和菜单栏;全屏显示
2: apple-mobile-web-app-status-bar-style(苹果手机状态栏如何显示)
Black:显示为黑色
black-translucent:显示为黑色并半透明(灰色)(可能会遮盖20到40px的页面顶部内容)
default:默认值(白色)
3: format-detection
Telephone:是否识别为手机号 yes/no
Email:是否识别为电子邮箱 yes/no
Adress:是否识别为地址 yes/no 注:当为yes时iPhone会自动跳转到地图
写法:
· meta name="format-detection" content="telephone=no"
· meta name="format-detection" content="email=no"
· meta name="format-detection" content="adress=no"
或者
meta name="format-detection" content="telephone=no,email=no,adress=no"
4: HandheldFriendly: 设备优化,针对一些老的不识别viewport的浏览器，比如黑莓
Yes/no
5: viewport:设置并规范webapp在手机浏览器中的可视区域
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
常规写法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

关于苹果手机webapp的设置
1: apple-mobile-web-app-capable设置为yes
允许苹果机通过safari添加主屏按钮到主屏幕上
2:设置<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
设置苹果webapp的图标

3: <link rel="apple-touch-startup-image" href="/startup.png"/>
设置当网页被设置为webapp时,打开此webapp时启动时的图片 参考技术B 最近碰到几个很烦，苹果在输入的时候底部的键盘会把页面顶上去，相当于页面高度会重新计算，如果页面有定位或者弹窗之类的在弹窗之内的焦点会改变，要写一个键盘自动的下落的全局JS
还有苹果的自带浏览器不支持支付宝的app付款接口的跳转
还有一个苹果里面li标签不能触发点击事件，（这个不太确定，总之我把li标签换成div过后点击事件就生效了） 参考技术C 这个你可以去网上搜一下一大堆，牛客网里就有不少面试题你可以去看看，我感觉是不错的，你也可以试试。