手机浏览器兼容性测试结果概要 (WAP开发备注)

产品经理拿着荣耀20来找茬?这份Flex布局兼容性急救指南请收好 本文针对Flex布局在荣耀20等老版本安卓设备上的兼容性问题,提供了三种实用的解决方案,包括负边距模拟方案、传统Margin方案和CSS Grid降级方案。通过详细的代码示例和兼容性分析,帮助前端开发者快速解决`gap`属性不兼容的难题,并分享了向非技术人员解释此类问题的沟通技巧。 阅读详情

注意: 以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为 20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征的手机,但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的:

  • 表单元素的“disable”属性

部分手机不支持的:

  • “button”标签
  • “input[type=file]“标签
  • “iframe”标签。

虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

少数手机不支持的:

  • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。
CSS部分

大部分手机不支持的:

  • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
  • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
  • “font-style: italic;”:同上;
  • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
  • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
  • “background-position”属性:但背景图片的其他属性设定是支持的;
  • “position”属性;
  • “overflow”属性;
  • “display”属性;
  • “min-height”和”min-weidth”属性;

部分手机不支持的:

  • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
  • “pading”属性
  • “margin”属性:更高比例的手机不支持”margin”的负值。

少数手机不支持的:

  • 少数手机对CSS完全不支持;
JavaScript部分

这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级。

其他
  • 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片
  • 另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计
  • 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条
  • 少数手机在打开超过20k的测试页面时,会显示内存不足

开发中你需要注意的问题

  1. 手机网页编码需要遵循什么规范?
    遵循XHTML Mobile Profile规范(WAP-277-XHTMLMP-20011029-a.pdf ),简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTML MP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。
  2. 网页文档推荐使用扩展名?
    推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
  3. 为什么现今大多数的网站一行字数上限为14个中文字符?
    由于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。
  4. 使用WCSS还是CSS?
    WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap- input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。
  5. 避免空值属性
    如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。
  6. 网页大小限制
    建议低版本页面不超过15k,高版本页面不超过60k。
  7. 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱?
    有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。

                                                              文章转载于互联网

高德地图可视化入门:零基础用Python+高德API打造你的第一个热力图 本文详细介绍了如何使用Python和高德地图API从零构建商业级热力图。通过环境配置、地理编码、数据清洗到最终可视化展示的全流程指南,帮助开发者快速掌握地图可视化技术,特别适合展示商圈人流、疫情热点等地理分布数据。 阅读详情

相关推荐

ORB-SLAM3单目+IMU实战:从数据加载到位姿优化的完整流程解析

本文详细解析了ORB-SLAM3单目+IMU模式的完整实战流程。从EuRoC等数据集的数据格式准备、系统启动与数据流入口,到帧构建、IMU预积分、视觉-惯性联合初始化,再到基于运动模型的跟踪、局部地图优化及多线程协同,提供了从环境配置到代码解读的全面指南,并分享了参数调优与性能分析的实用调试经验。

weixin_29085151的博客 296

手机页面设计注意事项

XHTML部分 大多数手机不支持的: 表单元素的“disable”属性 部分手机不支持的: “button”标签 “input[type=file]“标签 “iframe”标签。 虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。 少数手机不支持的: “select”标签:该标签如果被赋予比较...

weixin_30858241的博客 256

Hi3516CV610 YOLOv8模型转换与部署实战:从源码到板端推理全流程解析

本文详细解析了将YOLOv8模型部署到Hi3516CV610开发板的全流程。内容涵盖从Ubuntu环境搭建、模型获取与验证,到关键的PyTorch模型转换为ONNX格式,并利用海思工具链量化生成板端可执行的.wk文件。最后,指导开发者编写板端C程序,完成视频流处理、NNIE推理及结果后处理,并提供了部署调试与性能优化的实用技巧。

weixin_29215815的博客 270

Android下的微博(新浪)-->第二步请用户授权Request Token

上面的得到了未授权的Request Token 通过下面的网址可以得到一个PIN值 http://api.t.sina.com.cn/oauth/authorize?oauth_token=7b5df7e735523e540d9b9385dea44566 所谓的PIN码其实就是授权码把这个PIN码记住 请求参数说明 如使用XML/JSON返回方式(参看后文),需传递以下附加参数...

weixin_30593443的博客 112

使用qt+PaddleOCR做一个OCR软件demo

文章目录使用qt+PaddleOCR做一个OCR软件demo效果展示1 建立环境1.1 vs项目环境1.2 qtcreator项目环境1.2.1 源代码整理1.2.2 依赖项整理如下1.2.3 模型文件如下1.2.4 在.pro文件中设置依赖库的模式1.2.5 pro文件中添加.h和.lib2 在工程代码中添加截图功能2.1 新建截图类并连接信号2.2 QImage转cv::Mat3 在工程代码中集成PaddleOCR3.1 初始化PaddleOCR3.2 修改文字识别类的run函数,增加一个返回结果的值的

ShareProgress的博客 9309

Ansys Zemax导入CAD文件避坑指南:STL/STEP/IGES格式选择与性能优化

本文深度解析了在Ansys Zemax中导入CAD文件的核心要点与性能优化策略。针对STL、STEP、IGES等主流格式,详细对比了其几何表示、精度与适用场景差异,并提供了基于模型特征的格式选择决策树。文章重点分享了体元、弦公差等高级参数的调优技巧,以及处理复杂装配体和避免精度陷阱的实战指南,旨在帮助光学工程师提升仿真效率与结果可靠性。

weixin_29202687的博客 438

移动端web开发

随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。移动端Web主要指运行在移动端(手机、ipad)的web页面, 因为具备HTML5特性也叫H5页面、Web App等。我们开发的网页,在不同的手机上,若想展示效果一致,必然不是为每一种型号手机都开发一套页面,而是要尽可能的能适配所有。2.能调用系统的 api 优点是性能更好,实现的一些非常酷的交互效果,但是发布 app 流程繁琐,而且不跨平台。和一般的web一样,维护比较简单。

m0_73749787的博客 422

[ vulhub漏洞复现篇 ] Drupal XSS漏洞 (CVE-2019-6341)

[ vulhub漏洞复现篇 ] Drupal XSS漏洞 (CVE-2019-6341) Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成,在GPL2.0及更新协议下发布。Drupal在某些情况下,通过文件模块或者子系统上传恶意文件触发XSS漏洞。

qq_51577576的博客 2209

web 自适应

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。     viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。   对

jodan179的专栏 1655

MuJoCo Playground 机器人强化学习入门教程(一)

MuJoCo Playground 包含 DM 控制套件、机器人运动和机器人操作环境。env每个环境还与一个环境配置相关联,如果需要,可以覆盖该配置。env_cfg请注意,环境配置包含 sim_dt 和 ctrl_dt。ctrl_dt 决定每个 env.step 的时间间隔。因此,每个 env.step 的模拟步长为 ctrl_dt / sim_dt 倍。其他值得注意的参数还有 vision_config,我们将在基于视觉的笔记本中详细讨论!现在,我们将专注于特权观察。

2506_90492529的博客 4619

GlobalBuildingAtlas 建筑物白模数据下载

GlobalBuildingAtlas基于OSM开源数据构建全球建筑物3D白模,提供在线浏览和下载服务。官方资源包括GitHub项目地址和TUM数据库链接,支持行政区划检索建筑物数据。

一醉千秋的专栏 542

移动端WEB开发

由于 Retina 的出现,对于一张 50px * 50px 的图片,在手机 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情。meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽(乔布斯提出的哟)

a_xia_o的博客 1549

基于Simulink的四足机器人楼梯攀爬仿真模型

构建一个基于Simulink的四足机器人楼梯攀爬仿真模型,旨在模拟四足机器人在面对楼梯等障碍时的运动控制和稳定性调整。以下是一个详细的步骤指南,帮助你从零开始创建这样一个仿真模型。

xiaoheshang_123的博客 247

手机测试用例-wap测试用例

Software Test Case P/F comment tester test time P/F comment tester ID 功能描述 操作步骤 预期结果 备注 wap_001 wap browser界面显示 1、点击wap浏览图标 2、显示“主页、书签、链接、文件、设置、收件箱”功能条 1、进入wap浏览界面 2、功能菜单显示正常 ...

diaoyan8751的博客 519

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

wap手机端页面根据dpr和宽度计算出font-size对应数值

wap手机端页面根据dpr和宽度计算出font-size对应数值 最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下。 wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度

xiqim的专栏 960

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

App 测试核心知识点总结 重点难点全在这_app测试重点与手机交互

在测试计划中:需要安排单独的时间用于 android 不同系统的兼容性测试,包括 2.0 以下版本和 4.0 以上等。3>.手机不同厂家系统的支持:不同厂家会有不同 android 系统,例如:小米,华为,锤子对市面上主流手机的支持扫码领取。2.外网测试主要覆盖到 wifi\2G\3G\4G,.net\wap、电信\移动\联通、所有可能的组合进行测试。4>.手机不同尺寸的支持:3.5 到 5.0 屏幕在 UI 显示有区别,要支持最大到最小。——网络的兼容性:2G\3G\4G\WIFI,弱网下、断网时。

2401_84264692的博客 851

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

ios端支付宝问题一二备注

ios使用支付宝支付,很简单,看支付宝的demo便可.不便的是支付回调后的处理,支付宝没给出类似其他第三方集成平台的分类处理demo. 说说使用ios端支付遇到的问题; 1,旧版本的支付宝,一直验证不通过.   有部测试机,ios6系统,安装了很旧的支付宝版本,支付时,一直提示密钥验证不过.后来对比使用ios8上和最新的支付宝客户端加密的固定明文的串,发现两者加密后完全一样(ios6上的旧版

备忘录-IOS知识等 1338

安全手机项目总结

做这个项目的我。名义上还是公司的员工,实际上已经算半个外包人员了,哈哈,不要太当真,吐槽下啦!这个项目是北京的安全手机项目,由于他们人员不够,就由我们协助他们开发,据开会了解,服务端的数据库、技术框架等都是由北京同事搭建好,成都同事负责部分模块。现在就着重说说前端的事情,项目发版的时间已经给定出来了,但是前端的UI、所使用的框架技术完全没有定下来(他们给了两个网站demo,一个是用angularJs

半颗茜 969

移动端开发之CSS3兼容处理

1. 主流浏览器引擎前缀 -webkit- (谷歌, Safari, 新版Opera浏览器等) -moz- (火狐浏览器) -o- (旧版Opera浏览器等) -ms- (IE浏览器 和 Edge浏览器) 只有在新的css3的实验性的属性前需要添加前缀,目前大部分常用的css3新属性都可以直接舍弃前缀。查看浏览器兼容css3属性情况请参考: 网址 .wrap { display: -webki...

qq_31749421的博客 746

手机网站字号自适应

最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下。 wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px

思科网络 1967

TextView属性android:ellipsize=“marquee“不生效的解决办法

TextView属性android:ellipsize="marquee"不生效的解决办法 TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <TextView android:id="@+id/music_name_tv" android:layout_width="match_parent" a...

sinat_25581149的博客 1724

Excel单元格换行原理与跨平台实操指南

Excel单元格换行并非简单的文本编辑行为,而是涉及编辑模式、渲染协议(Wrap Text)、ASCII控制符(CHAR(10)/CHAR(13))及平台兼容性的系统级机制。其底层逻辑源于Excel作为二维计算引擎的设计定位——Enter默认跳格以适配数据录入效率,而换行需显式触发‘软换行’并配合自动换行渲染。技术价值在于支撑地址、工单、会议议程等多行结构化信息的紧凑表达;典型应用场景包括快递面单生成、CSV批量清洗、动态座签输出及移动端应急处理。本文聚焦Excel换行失效的根因诊断与全链路解决方案,深度融

weixin_26834281的博客 279

TextView属性android:ellipsize="marquee"不生效的解决办法

最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <TextView android:id="@+id/music_name_tv" android:lay...

weixin_30791095的博客 361

Winlator CPU配置优化:多核处理器性能调优指南

还在为Winlator运行Windows应用时性能不佳而烦恼?想要充分发挥手机多核处理器的潜力?本文将为你提供全面的CPU配置优化指南,帮助你在Android设备上获得最佳的Windows应用运行体验。 ## ???? 读完本文你将获得 - Winlator CPU亲和性配置原理深度解析 - 多核处理器分配策略与性能优化技巧 - Box86/Box64预设对CPU性能的影响分析 - 实战案例:不同...

gitblog_00508的博客 1807
上一篇: SQL报错“参数数据类型 text 对于 replace 函数的参数 1 无效”
下一篇: C# 附件转二进制数据 二进制数据转附件
Hashxu
博客等级 码龄21年 13粉丝 45原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值