移动端html怎么兼容不同页面播放同一首歌，frame不行。有没其他方法。

Posted 2023-05-13

html播放音频用<audio>标签。

 <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
    </audio>

1、<audio>标签是HTML5音乐播放器。

<audio>标签：用于在文档中表示音频内容。利用它，你可以在你的个人网站上放一首你喜欢的歌

2、用法跟<video>标签一样，属性src指定音频文件地址。<audio>标签默认是隐藏的。

3、为了方便我们对音频文件进行控制，操作它的进度、播放暂停、音量等等，我们可以给它添加controls属性：<audio src="m.mp3" controls></audio>。对于加上了controls属性， 不同的浏览器会展示不同样式的控制面板。

4、跟<video>标签一样，<audio>标签也 source、autoplay  loop、preload等属性 。

( chrome浏览器的音频控制面板 )

参考技术A frame已经被淘汰了的，现在都是HTML5来写了

关于移动端页面的适配

移动端页面：

       适配，适应各个不同的设备，如果是纯粹的移动端页面的话不用去考虑ipad,PC。

       浏览器，微信（朋友圈），QQ(内置浏览器)，UC

       小米，华为会有部分兼容问题。

响应式：

　　　必须共享一套html结构，样式不同而已，通过设备的分辨率来自动去切换样式

　　　只适用于简单页面：博客，新闻，简单的公司门户；

 

viewport 一般默认手机网页采用980px的宽，不设viewport就默认980；

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=0">

rem适配：

640（iphone5的320）   750（根据iphone 6）   1000+（iphonePlus）

　　　　　　如果可视区的尺寸比640（页面大小）要大   页面只显示640

　　　　　　如果小的话，会按照一个比例来缩小

　　　　　　40   — HTML的font-size

　　　　　　640/40             16   分成16份每个格最大40

750   

　　　　　　50  — HTML的font-size

　　　　　　750/50            15   分成15份每个格最大50

 

<script>

（function setSize（）{
　　var _html=document.getElementsByTagName(‘html‘)[0];
　　var ch=document.documentElement.clientWidth;     //可视区的宽度
　　if(ch>640){               //这里是按设计图640，当然也可改成750
　　_html.style.fontSize=‘40px‘; 　　//当750时候也要改成50px 
　　}
　　else{
　　　　_html.style.fontSize=ch/16+‘px‘;   //通过可视区宽度来改变HTML中font-size的大小，如320(html的font-size：20px)    这里的16也要改15
　　}

　　window.onresize=setSize;    //横竖屏幕切换

}）();

</script>

 

例如：

　html{

　　font-size:40px             // 1rem =40px    

}

.box{

　　width:7.5rem;               // width:300px/40px   如640的图里一个logo的宽度 为300px

      height:7.5rem;

}