网页设计与网站建设作业怎么做,网页版百度,wordpress musik,设计师接私活的网站解决兼容性问题的关键在于对移动端产品的生存环境进行梳理#xff0c;在此基础之上制定应对策略。
所谓生存环境主要分为三个维度#xff1a; 硬件环境#xff0c;细分为品牌和机型#xff0c;决定了屏幕大小、性能等硬件限制 操作系统#xff0c;比如iOS6和iOS7#xf…解决兼容性问题的关键在于对移动端产品的生存环境进行梳理在此基础之上制定应对策略。
所谓生存环境主要分为三个维度 硬件环境细分为品牌和机型决定了屏幕大小、性能等硬件限制 操作系统比如iOS6和iOS7或者安卓各家的定制系统的不同版本 浏览器主要分为App容器原生浏览器各品牌浏览器
为什么要做页面适配 不同机型的屏幕尺寸、物理像素和逻辑像素都有差异而ui 的尺寸一一般是固定的如果都使用px的写法会导致不同手机上样式的错乱。
如何做页面适配 什么是像素像素Pelpixel;pictureelement为组成一幅图像的全部亮度和色度的最小图像单元。单位面积内的像素越多图像的效果就越好。 什么叫分辨率呢? 屏幕分辨率是指纵横向上的像素点数单位是px。屏幕分辨率高时例如 1600 x 1200在屏幕上显示的像素多单个像素尺寸比较小. 不同系统的不同浏览器对小数点的px有不同的处理,例如手机上观察iOS的Chrome会画出0.5px的边而安卓(5.0)原生浏览器是不行的。所以如果我们把单位设置成小数的px包括宽高等其实不太可靠因为不同浏览器表现不一样。
最早的解决方案rem remfont size of the root element是CSS3新增的一个相对单位是指相对于根元素的字体大小的单位。flexible 的原理就是这个。
const scale root.clientWidth / 10 设备视口宽度例如375px
root.style.fontSize scale px 可自定义根元素的比例1rem 37.5px
后续使用的时候需要转为rem 可以和less配合使用
/*rem.less*/
device-width: 375; /*设备布局视口*/
rem: (device-width/10rem);由于viewport单位得到众多浏览器的兼容lib-flexible这个过渡方案已经可以放弃使用不管是现在的版本还是以前的版本都存有一定的问题。建议大家开始使用viewport来替代此方。
解决方案二vw、vh适配 vwViewport Width、vh(Viewport Height)是基于视图窗口的单位是css3中提出来的基于视图窗口的单位。 vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。 如果按视觉视口为375px那么1vw 3.75px这时UI给定一个元素的宽为75px设备独立像素我们只需要将它设置为75 / 3.75 20vw
// 还是rem.less 我们加一个vw变量
device-width: 375;
rem: (device-width/10rem);
vw: (100vw/device-width);解决方案三viewportPX 这种方案可以让我们在开发时不用关注设备屏幕尺寸的差异直接按照设计稿上的标注进行开发也无需单位的换算直接用px。 在 HTML 的 head 标签里加入
meta nameviewport contentwidth{设计稿宽度}, initial-scale{屏幕逻辑像素宽度/设计稿宽度} 。export function initViewport() {const width 375; // 设计稿宽度const scale window.innerWidth / width// console.log(scale, scale)let meta document.querySelector(meta[nameviewport])let content width${width}, init-scale${scale}, user-scalablenoif(!meta) {meta document.createElement(meta)meta.setAttribute(name, viewport)document.head.appendChild(meta)}meta.setAttribute(content, content)
}
自适应布局方案 1、媒体查询 2、flex media screen and (min-device-width:800px) {.div div {width: 33.3%;}}遇到的兼容性问题记录 问题一 、 自动播放 ios safariiPhone Safari中不支持但在webview中可能被开启iOS开发文档明确说明蜂窝网络下不允许autoplay chrome中设置mouted后可以自动播放 微信中不允许自动播放。但是可以借助WeixinJSBridge实现
单例问题 ios safari中的音频对象是单例的ios中是无法播放多个音频文件的 循环播放 ios部分机型不支持循环播放 解决方案监听播放完成事件ended手动触发播放
!doctype html
html
headtitleLooping Audio/titlescript typetext/javascriptfunction init() {var myAudio document.getElementById(audio);myAudio.addEventListener(ended, loopAudio, false);}function loopAudio() {var myAudio document.getElementById(audio);myAudio.play();}/script
/head
body onloadinit();audio idaudio srcmyAudio.m4a controls/audio
/body
/html
问题二 、video 的 preloadios下是不支持的。 通用的方法是对视频进行play()后立即停止 ios视频自动全屏播放设置内联属性playsinline webkit-playsinline
问题三 、Android浏览器下line-height垂直居中为什么会偏离 原因 推测可能是Android在排版计算的时候参考了primyfont字体的相关属性即HHead Ascent、HHead Descent等而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上而原生Android下中文字体是没有family name的导致匹配上的始终不是中文字体所以解决这个问题就要在font-family里显式申明中文或者通过什么方法保证所有字符都fallback到中文字体
作者虎三刀 链接https://juejin.cn/post/7103835385280593957 来源稀土掘金 著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。 ios 的不存在这个情况。安卓下低于12px都会出现渲染上浮的情况 display: flex; align-items: center;
问题四 、安卓部分版本input的placeholder偏上 input的line-height设为normal input{ line-height:normal; }
问题五、ios日期转换NAN问题 具体就是new Date(‘2020-11-12 00:00:00’)在ios中会为NAN 决绝方案用new Date(‘2020/11/12 00:00:00’)的日期格式或者写个正则转换
问题六、windo.open 实现在ios上非用户触发得被拦截 修改交互
问题七、input上传文件multitype在安卓机上存在兼容问题图片可以选择多个文件只能选一个使用企微的api解决原生能力
问题八、ios手机上将图片转成base64失败 原因 转换需要给图片设置允许跨域但是在ios手机上允许跨域和给src赋值有顺序的区别在chrome模拟没顺序问题 解决方案 先给Image对象设置允许跨域再给Image对象的src赋值
