`
44289533
  • 浏览: 66954 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

android 视区

阅读更多

    通俗的讲,就是为移动设备开发网页。伴随着3G时代的到来、浏览器技术的不断进步,越来越多的人开始离开PC,使用手中的移动设备(手机、PSP、平板)上网。如果您是一个注意生活细节的人,那么在您乘坐地铁、公交的时候,请认真看看你周围的人都在干什么?是不是每人抱着一个手机在听音乐、看新闻、聊天呢?

      作为一个开发人员,如何开发出更适合于移动设备的网页呢?如何让您的站点能被大多数移动设备更轻松地访问?本系列文章将会一一的为您解答。

      当今最受欢迎的手机系统包括 Android,iPhone ,Symbian,BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心,而webkit号称是一款全功能的移动浏览器,支持 HTML + CSS + JavaScript,但由于移动设备本身与PC的差异,导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。

 

      首先我们要接触的第一个概念就是“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一段都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:

页面以980像素加载,没有变形,但是按比例缩放后,已经没有多少东西是可以用肉眼看清的了,好在一般的移动设备都支持屏幕放大。放大之后,我们才能看清屏幕上的内容。 

怎么样,对viewport的概念有一定的了解了吧?那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:

<meta name="viewport" content="width=500"/>
我们来看看页面加上强制视区大小命令后效果怎么样? 如下图所示:
怎么样?是不是好了很多?那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小,然后让内容自适应。很简单,看来面的代码:
<meta name="viewport" content="width=device-width" />

device-width将自动检测移动设备的屏幕宽度。

怎么样?满意了吧?所有页面内容都和移动设备屏幕自适应。

分享到:
评论

相关推荐

    两个文件android.iml文件 和android.ipr文件

    将这个文件放置在源码根目录下,意味着整个项目被视为一个模块。 其次,`android.ipr`文件是Android Studio的项目级配置文件,它保存了整个项目的配置信息,包括项目结构、库依赖、插件设置、版本控制集成等。这个...

    Android-RibbonViews这是一个android视图库“RibbonViews”

    总之,"RibbonViews"是一个强大的Android视图库,它为开发者提供了实现丝带效果的新途径,让应用界面更具创意和吸引力。通过熟练掌握和巧妙运用这个库,开发者可以为用户创造更独特、更引人入胜的互动体验。

    android视音频播放以及文件浏览

    总结,构建一个Android视音频播放器和文件浏览应用,需要掌握多媒体播放技术、文件系统操作以及UI设计,同时注意权限管理和用户体验。选择合适的播放器框架,利用SAF访问文件,设计直观的用户界面,是实现这一功能的...

    Android-Android多渠道打包方案兼容AndroidP

    每个Product Flavor可以视为一个独立的渠道,具有独特的资源和配置。通过在build.gradle文件中定义不同的flavors,可以在编译时自动处理不同渠道的差异,无需手动修改APK。 2. 替换资源:在Android P中,动态替换...

    Android代码-安卓视音频播放测试工程.zip

    这个名为“Android代码-安卓视音频播放测试工程”的压缩包提供了一个实践项目,帮助开发者深入理解和掌握Android中的多媒体处理技术。以下将详细解析这个工程中可能涉及的关键知识点。 1. **Android多媒体框架** ...

    Android-AndroidProcesses.zip

    Android系统中的每个应用程序都被视为一个独立的进程运行,这与许多其他操作系统有所不同。这种设计确保了应用程序之间的隔离,减少了相互影响的可能性,提升了系统的安全性。进程是Android系统资源分配的基本单位,...

    Android-Android应用中的动画评分视图库可根据所选评级显示相应的情绪

    总之,Android应用中的动画评分视图库是一种创新的UI设计元素,它能提升用户交互体验,使得评分过程更富表现力和趣味性。通过“rubygarage-emotion-rating-view”这样的开源库,开发者可以快速、轻松地实现这一功能...

    Android视录视频示例及代码

    ### Android视录视频示例及代码解析 在深入解析给定的代码片段之前,我们先了解下Android视频录制的基本概念。Android系统提供了丰富的多媒体API,其中`MediaRecorder`类是用于录制音频和视频的主要工具。它能够将...

    有关android技术英文文献翻译

    Android 操作系统是一个多用户 Linux 系统,每个应用程序都被视为一个不同的用户。系统将每个应用程序分配一个唯一的 Linux 用户 ID,该 ID 仅供系统使用,应用程序不知道该 ID。系统会设置应用程序所有文件的权限...

    Android类似翻书效果

    3. **视图层次结构**:在Android中,每个页面可以被视为一个独立的视图(View)。为了达到翻页效果,我们需要两个视图,一个代表当前页面,另一个代表下一页。当动画执行时,这两个视图的相对位置和透明度会发生变化...

    android图片翻转动画

    在Android开发中,实现图片翻转动画是一种常见的交互设计,可以增强用户体验,使得应用看起来更加生动有趣。本文将深入探讨如何在Android平台上实现3D图片翻转动画。 首先,我们需要了解Android中的动画系统。...

    Android-Shuffle-Android易于使用滑动视图

    "Android Shuffle"是一个专门为Android平台设计的滑动视图库,它旨在简化开发者在创建动态、交互性强的滑动效果时的工作流程。Shuffle视图库提供了一个易于使用的组件,可以实现类似卡片滑动、轮播或瀑布流等常见的...

    Android 局部毛玻璃透明效果

    在Android开发中,为了提升应用的视觉效果和用户体验,开发者经常使用各种特效,其中“局部毛玻璃透明效果”就是一种流行的设计风格。这种效果模仿了iOS中的“Blurry”技术,使得界面的一部分呈现出模糊透明的效果,...

    关于Android的外文文献

    1. **多用户Linux系统**: Android操作系统本质上是一个多用户Linux系统,在该系统中每个应用程序都被视为一个独立的用户。 2. **唯一用户ID**: 默认情况下,系统为每个应用程序分配一个唯一的Linux用户ID。这一ID仅...

    AndroidResEdit.zip

    4. 安全风险:修改签名可能会让应用失去官方更新,且可能被安全软件视为潜在威胁,因此只应在必要时进行。 总结,AndroidResEdit是一款实用的Android应用辅助工具,它简化了汉化和签名修改的过程,使开发者和本地化...

    老罗android开发视频教程全集百度网盘下载

    Android 是Google开发的基于Linux平台的开源手机操作系统。它包括操作系统、用户界面和应用程序—— 移动电话工作所需的全部软件,而且不存在任何以往阻碍移动产业创新的专有权障碍。 Android以Java为编程语言,使...

    fork android 防清理(ndk 源码)

    在Android开发中,保持后台服务不被清理是一个常见的需求,特别是在实现持续运行的任务或后台通信时。本主题涉及的关键技术是“fork android 防清理”以及与NDK(Native Development Kit)源码相关的实现。这里我们...

    阿里Android开发手册最新版

    2. **项目结构**:手册提供了合理的项目结构建议,如遵循MVP或MVVM架构模式,将业务逻辑、视图层和数据模型分离,以提高代码可读性和可维护性。此外,还强调模块化和组件化的思想,使项目更易于扩展和复用。 3. **...

    PC 通过USB 与android APP 通信

    这种情况下,APP需要创建ServerSocket监听USB端口,PC则通过特定的IP地址(通常是127.0.0.1或localhost,因为USB连接被视为本地网络的一部分)和端口号与之通信。 此外,还可以使用Android的UsbManager API来直接...

    Android OpenGL ES 绘制三维/空间坐标系透明

    2. **坐标轴绘制**:每个坐标轴可以被视为一组线段。你可以使用`glLineWidth()`设置线宽,然后通过`glBegin(GL_LINES)`开始绘制线条,使用`glVertex3f()`定义每个顶点的坐标。记得为X、Y、Z轴分别设置不同的颜色...

Global site tag (gtag.js) - Google Analytics