再挖一个坑
,canvas的游戏开发基础暂时没时间弄了,等过一段时间闲下来了做一下。工作需要,补上一系列Mobile Web 开发的基础知识总结与相关文章的翻译。本系列针对传统的桌面浏览Web前端开发者。
我们先来一个基础的HTML5的网页框架,如下
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本HTML5网页架构</title>
</head>
<body>
<p>HelloWorld</p>
</body>
</html>
我们将其部署到Web服务器中,在桌面上的任何一个浏览器上访问,都会看到一致的体验,因为代码太简单了,根本没有什么跨桌面浏览器适配的坑。但如果我们使用移动浏览器如Mobile Safari来访问,就会看到一个问题----字太小了,如果不使用放大功能,根本就看不清上面的字。
宽度——我们做Mobile Web开发的第一个需要趟的河,因为移动设备的碎片片太严重了。以iPhone上的Mobile Safari为例,可能是因为Mobile Safari在请求到刚才的网页后,假设它是一个为桌面浏览器设计的网站(实际上可能大多数移动浏览器都是这样认为的)。因此Mobile Safari假设网页宽度是980像素(不同的浏览器可能默认不同),同时将其缩小以便全部显示。如果我们的网页是专门为移动终端设计的,那么我们就需要告诉移动浏览器不要以默认的宽度来显示。因此,我们需要使用viewport.对以上代码进行修改,如下:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>基本HTML5网页架构</title>
</head>
<body>
<p>HelloWorld</p>
</body>
</html>
再次在Mobile Safari中浏览此网页,就可以看到网页显示中的字变得很清晰,协调了。在此也可以将width设置为数字,如320或480,但是由于不同的设备不同,我们只需要使用device-width,浏览喊叫将会自动识别。
再次认识一下viewport, 这个元标签配置目前已经被大多数移动终端浏览器所支持,如iOS,Android,Opera Mini, Opera Mobile等。最后,我们再来看一个m.yahoo.com的viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
可以看出,它阻止用户对网页进行缩放操作,如果我们将配置改为下面的
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
就可以允许用户使用手指缩放当前的网页了。
定制化Android系统的viewport属性
Android的官方文档(http://developer.android.com/reference/android/webkit/WebView.html)中列举了一些特别的元标签属性,比如target-densitydpi. 这个属性主要是允许开发者指定当前网页是为哪种屏幕分辨率而开发的,同时也指出了如何处理媒体(如图片的缩放)等。如下:
<meta name="viewport" content="target-densitydpi=device-dpi" />
【注】强烈建议所有需要从事Mobile Web网站开发的工程师们,阅读Apple提供的Safari HTML References(http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf).里面会有如默认宽度,viewport设置等诸多的具体配置使用细则。
分享到:
相关推荐
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
该资源为joblib-1.1.0-py2.py3-none-any.whl,欢迎下载使用哦!
内容概要:本文详细介绍了如何使用MATLAB/Simulink R2015b搭建Buck-Boost变换器的开环和闭环控制仿真模型。首先,作者解释了Buck-Boost变换器的基本构成及其在电源设计中的重要性。接着,逐步指导读者构建开环模型,包括设置关键参数如PWM频率、占空比、输入电压等,并展示了开环控制下的输出特性。随后,引入了PID控制器进行闭环控制,强调了PID参数的选择与调整方法,以及如何通过增加电压采样和误差比较来提高系统的稳定性。此外,还分享了一些常见的仿真错误及解决方案,如电感值选取不当、二极管模型过于理想等问题。最后,提供了几个有趣的实验案例,如动态改变占空比、突变负载等,以展示闭环控制的优势。 适合人群:具有一定电力电子和MATLAB/Simulink基础的技术人员或学生。 使用场景及目标:适用于希望深入理解Buck-Boost变换器工作原理及其控制策略的研究者和技术爱好者。通过动手实践,掌握开环与闭环控制的区别,学会优化PID参数,提升电源设计能力。 其他说明:文中附有多处代码片段和实用技巧,有助于读者更好地理解和应用所学知识。同时提醒读者注意不同MATLAB版本间的兼容性问题。
2023年上海市高等学校计算机等级考试.docx
能检测死锁,输出相关代码便于排查
电子商务物流业务管理教材.pptx
基于stm32的控制底层
2023年全国计算机等级考试三级数据库试题.doc
2023年计算机二级考试操作题真题.doc
2023年自考管理系统中计算机应用试题及答案.doc
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
2023年电子科技秋网与网站设计在线作业.doc
内容概要:本文详细介绍了基于脉振高频电压注入的无速度传感器控制系统。该方法通过向电机定子绕组注入高频电压信号(如2kHz),利用高频响应电流中的转子位置信息进行实时定位。文中展示了具体的代码实现,包括信号注入、带通滤波、正交锁相环以及位置跟踪观测器的设计。此外,讨论了参数整定、抗干扰措施(如伪随机频移键控)和实际调试过程中遇到的问题及其解决方案。该方法适用于低速或零速情况,能够显著提高位置估计的准确性。 适合人群:从事电机控制、自动化控制领域的工程师和技术研究人员。 使用场景及目标:①用于工业伺服系统中,特别是那些对成本敏感或安装空间有限的应用;②解决传统方法在低速或零速情况下无法准确估计转子位置的问题;③提供一种可靠的无速度传感器控制方案,减少硬件成本和维护难度。 其他说明:该方法虽然在低速时表现出色,但在高速时精度有所下降,可以通过混合观测策略进行优化。同时,实际应用中需要注意高频信号带来的额外损耗和参数敏感性问题。
2023年计算机二级基础知识重点总结.docx
该资源为joblib-1.1.0.tar.gz,欢迎下载使用哦!
An-225大型运输机实体装配模型由225个实体零件基元组成,分为21个子装配模块。 该模型是通过缩放一个基本的8.5英寸x11英寸三视图原理图而开发的。 因此,其精度有所降低。
matlab
2024年大数据软件项目深度研究分析报告.docx
2023年四川省一级计算机等级考试训练题.doc