`

html 适应手机

    博客分类:
  • js
阅读更多

在用HTML5开发手机应用或手机网页时,head部分总会有如下一段代码,这段代码到底什么意思呢。在网上,大家会得到很多答案。我从网上搜集了部分介绍,整理一下,以留备用。

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>

 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放
   

分享到:
评论

相关推荐

    html自适应屏幕,手机wap开发

    自适应屏幕html页面,用于手机wap开发,很不错的例子

    Html5_手机页.rar_H5 外卖餐饮 手机端_palaceyen_小程序H5_手机 html5外卖_手机外卖html

    5. WAP版:WAP版通常指的是适应低带宽和简单设备的网页版本,HTML5的可适应性使其能很好地适应不同网络环境和设备,确保在2G、3G网络下也能提供基本的外卖订餐服务。 6. 手机HTML5外卖:HTML5页面可以直接在手机...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap栅格系统是一种基于12列的响应式布局框架,旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果,优化用户体验。Bootstrap栅格系统的...

    手机html界面大全

    1. **响应式设计**:手机HTML界面必须具备响应式布局,能够适应不同屏幕尺寸和分辨率的设备。例如,"jQuery网页特效最全网页模板和网站模板jQuery代码_17素材网.html"中可能包含了各种尺寸下的适配策略。 2. **触控...

    手机移动端登录login html5模板

    结合以上HTML5特性,"amz_25_zdd"可能是一个包含登录界面模板的文件,它可能包含一个设计精良的HTML5登录页面,利用了上述各种功能,提供了一个高效、美观且适应多平台的登录体验。通过阅读"readme.md",我们可以...

    html5手机端上传图片

    HTML5是现代网页开发的重要标准,它为网页应用带来了许多增强功能,其中之一就是对手机端图片上传的支持。在移动设备上,用户可能希望通过点击或拖拽来上传照片,或者从设备的媒体库中选择图片。以下是对这个主题的...

    仿淘宝手机商城模板HTML5.zip

    “移动端”和“手机端”则明确了这个模板是为智能手机和平板电脑等移动设备优化的,适应小屏幕显示和触摸操作。 在压缩包内的“仿淘宝手机商城模板HTML5”文件夹中,通常会包含以下组成部分: 1. HTML文件:各个...

    HTML5手机底部菜单

    为了确保在手机屏幕上适应,我们可以使用媒体查询(`@media`)来实现响应式设计。例如,将菜单在小屏幕设备上堆叠成垂直布局: ```css .bottom-menu { display: flex; justify-content: space-between; align-...

    20个html5手机网站模板源码

    总结,HTML5手机网站模板是现代Web开发中不可或缺的工具,它们结合了HTML5的新特性、响应式设计以及预设的视觉样式,帮助开发者快速构建适应移动设备的网站。通过学习和使用这些模板的源码,不仅可以提高开发效率,...

    HTML 手机单页demo

    本项目提供了一个"HTML手机单页demo",包括个人中心详情页面和H5详情页面,旨在展示如何构建适应不同平台的响应式Web应用。 1. HTML5:HTML5是超文本标记语言的最新版本,增加了许多新的语义元素和功能,如离线存储...

    html手机端WEB纯静态页面

    HTML手机端WEB纯静态页面是为移动设备设计的网页,主要特点是不依赖服务器端的动态处理,而是由HTML、CSS和JavaScript等前端技术构建而成。这样的页面能够快速加载,适应不同屏幕尺寸,提供良好的用户体验。以下是...

    仿UEhtml 自适应手机触屏版HTML5手机网站模板

    1. **自适应设计(Responsive Design)**:这种设计方法使得网站能够自动适应各种屏幕尺寸,无论用户是在大屏电脑、平板还是手机上访问,都能呈现出合适的布局。关键在于使用媒体查询(Media Queries)和流式布局...

    html5手机页面源码样例

    总的来说,这个HTML5手机页面源码样例是一个很好的学习资源,可以帮助开发者了解如何利用现代Web技术创建适应各种移动设备的网页。通过对这些源码的分析和实践,你可以掌握如何构建跨平台、高性能的移动Web应用,...

    html5手机版问卷

    HTML5手机版问卷是一种基于Web技术实现的移动端调查工具,它利用HTML5的先进特性,为用户提供了一种在手机或平板电脑上填写问卷的便捷方式。本压缩包包含了一个基本的HTML5问卷模板,该模板设计简洁,易于理解和修改...

    html5手机网站

    HTML5手机网站是一种基于HTML5技术构建的适应移动设备浏览的网页设计。HTML5是超文本标记语言(HyperText Markup Language)的第五个主要版本,它在2014年由W3C(万维网联盟)正式发布,旨在增强网页的交互性、可...

    手机html各种特效

    同时,Media Queries和Flexbox或Grid布局可以帮助我们适应不同屏幕尺寸,确保视频在手机上播放时的视觉效果。 此外,HTML5引入了WebSocket协议,实现双向实时通信,这对于构建聊天应用、游戏或股票报价等实时更新的...

    html5手机网站模板

    这种设计方法使得网站能够自动调整其布局和内容,以适应手机、平板电脑等各种设备的屏幕大小。通过媒体查询(Media Queries)和百分比布局,确保了在不同设备上都能提供良好的浏览体验。 最后,考虑到SEO优化,...

    手机html在线pdf预览js插件

    此外,为了适应手机屏幕,可能还需要调整CSS样式,确保预览界面在不同分辨率和方向下都能正常显示。 总之,"手机HTML在线PDF预览JS插件"通过"pdf.js"这样的库,为开发者提供了一种强大且灵活的解决方案,使得用户...

    html5手机网页模版

    HTML5手机网页模板是专为适应移动设备设计的网页模板,它充分利用了HTML5的新特性,如离线存储、媒体元素、表单控制等,来提供更好的用户体验和更高效的页面加载速度。这样的模板通常适用于想要快速搭建响应式、互动...

    15个HTML5手机网站模板

    HTML5手机网站模板是现代网页设计的重要组成部分,尤其在移动设备普及的今天,它们为创建适应各种屏幕尺寸和设备的微网站提供了便利。本压缩包包含15个精心设计的HTML5模板,专为手机用户优化,具有良好的用户体验和...

Global site tag (gtag.js) - Google Analytics