移动端开发的兼容性处理

PC机与移动端的分辨率不同,导致页面或视频会出现拉长的情况,针对移动端的兼容性问题,可尝试将以下代码加到网页中.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    <!--移动端版本兼容 -->
    <script type="text/javascript">
      var phoneWidth = parseInt(window.screen.width);
      var phoneScale = phoneWidth / 640;
      var ua = navigator.userAgent;
      if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
          document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, target-densitydpi=device-dpi">‘);
        } else {
          document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
        }
      } else {
        document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
      }

    </script>
    <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
    <!--移动端版本兼容 end -->
时间: 2024-12-15 03:07:11

移动端开发的兼容性处理的相关文章

移动端开发兼容性处理整理

[UC浏览器]video标签脱离文档流 场景:<video>标签的父元素(祖辈元素)设置transform样式后,<video>标签会脱离文档流. 测试环境:UC浏览器 8.7/8.6 + Android 2.3/4.0 . Demo:http://t.cn/zj3xiyu 解决方案:不使用transform属性.translate用top.margin等属性替代. [UC浏览器]video标签总在最前 场景:<video>标签总是在最前(可以理解为video标签的z-

专业移动APP 手机APP后台服务端开发

专业移动APP 手机APP后台服务端开发优势:8年PHP 9年JAVA开发经验采用THINKPHP 和JFINAL ,SBadmin 2框架进行开发完善的开发文档免费一年BUG维护 可签协议,可先预付20%,也可分段付款, 亲 请带好需求文档! QQ 184377367 报价原则1:功能列表2:兼容性3:安全要求等级4:是否需要完善的开发文档5:后台UI是否有要求

备:移动端开发资源和小技巧

(在github上看到的,转摘而来,如果有版权问题请联系我[email protected]) mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 移动端统计 (from BiosSun) 可基于下方所列出的统计数据来决定您要兼容的设备及浏览器. 百度移动统计 友盟指数 CNZZ 桌面及移动端浏览器统计 全球移动端浏览器统计 工具类网站 HTML5

29.html5 移动端开发总结

手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏览器? ie.百度.360.搜狗.火狐.欧朋.Chrome.谷歌.行者无疆.财猫省钱.遨游.Wise光速.UC.智慧.QQ.海豚...(大概有70-80多种) 五花八门,还好不用担心这都是表象.虽然浏览器各不相同但从浏览器

移动端开发的注意事项

PC端与移动端的区别 1.从兼容方面来说, PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机, 一般浏览器使用的都是webkit内核. 2.在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外包括移动端弹出的手机键盘的处理,这样的问题 在PC端都是遇不到的. 3.在布局上,移动端开发一般是要做到布局自适应的,我使用的一直是rem布局,感觉很好. 4.在动画处理上,PC端由于要考虑IE的兼容性,所以通常使

uni-app实现多端开发

多端开发,听名字就感觉不一样,一套代码.多端使用,适用于各个平台.市面上很多关于多端开发的框架,比较常用,流行的框架 uni-app,Chameleon(变色龙),taro这些,都可以支持多端,一套代码,8个平台支持, 语法差异上,uni-app和Chameleon(变色龙)都选择使用的是小程序和vue的语法结合,但是taro语法是react,熟悉react语法,比较熟悉这套框架,对于技术选项,框架的活跃度,这个框架的认知度,选择适合自己的框架. 根据公司的需求,选择框架,选择之前,也是研究了一

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程

WIFI物联网平台微信端开发分享

本文由企鹅圈原创成员Hunter_Zhu贡献. 本篇文章是基于近期一个项目微信端开发过程的一个总结.文中主要介绍了云智易平台下微信端开发的流程.该平台提供的主要功能以及此次H5开发使用到的一些UI组件.能够帮助企鹅仔高速对该平台微信开发有个了解. 本文介绍的微信硬件物联网开发思路不局限于某个平台.对市场上全部的平台,如机智云也是适用的,特此说明. 一.创建微信应用,配置微信server 在云智易开发平台中,开发人员须要在应用管理中创建一个微信应用,填写微信公众号的基本信息:APPID, APPS

一起学Google Daydream VR开发,快速入门开发基础教程一:Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https