移动端页面头部定义

我们在开发移动端页面的时候经常会遇到一些通用的需求，往往是，不支持缩放，苹果浏览器隐藏工具栏啊等等。我们总结一下：

 1 <head>
 2   <meta charset="utf-8">
 3   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 4   <title>项目名称</title>
 5   <meta name="description" content=""/>
 6   <meta name="viewport" content="minimal-ui, initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
 7   <meta name="apple-mobile-web-app-capable" content="yes">
 8   <meta name=‘apple-touch-fullscreen‘ content=‘yes‘>
 9   <meta name="full-screen" content="yes">
10   <meta name="apple-mobile-web-app-status-bar-style" content="black">
11   <meta name="format-detection" content="telephone=no">
12   <meta name="format-detection" content="address=no">
13   <meta name="keywords" content=""/>
14   <link rel="stylesheet" href="./css/reset.css"/>
15
17   <link rel="stylesheet" href="./css/index.css"/>
18 </head>
时间： 2024-11-05 03:47:06

移动端页面头部定义的相关文章

移动端页面头部解析

viewport(视口) 视口可控制网页在移动设备上的显示方式.如果未指定视口,移动设备将以典型桌面屏幕的宽度来呈现网页,并调整网页使其适合屏幕大小.通过设置视口,您可以控制网页在不同设备上的宽度和缩放比例.下图是safari开发者文档中的图示: ViewPort 标记 ViewPort 标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort 标记还表示文档针对移动设备进行了优化.ViewPort 标记的content值是由指令及其值组成的以

001-移动端页面头部设置

1 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> 2 <meta name="apple-mobile-web-app-capable" content="yes"> 3 <meta name="apple-touch-full

移动web页面头部书写

HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用户代理行为的编译.编译的值取content 里的内容.简单来说即可以模拟 HTTP 协议响应头.最常见的大概属于Content-Type了,设置编码类型.如 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> H5中可以简化为 <me

HTML5新结构标签和移动端页面布局

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r

移动端页面开发的一些常用的设置

viewport 视口(可视区窗口)设置详解 当我们试图在iPhone中输出屏幕宽度的时候,会发现屏幕宽度是980,居然和pc屏幕宽度差不多大 苹果主导的这些手机厂商,为了使用户获得完整的WEB体验,很多设备都会欺骗浏览器返回一个数值较大的视口,告诉浏览器,别以为我身子小,但是我想以980px宽度显示这个页面(分辨率和视口没有关系(开发中根据视口来算的)) 视口对于我们实现响应式是很不方便的.980太大了,不符合我们心中的期待,我们心中认为手机屏幕尺寸应该在320到400之间 默认不设置view

移动端页面布局

移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C 2.Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序 完全使用html5页面加前端js框架开发的手机应用 二.Viewport视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px

iOS开发实用技巧——在html页面头部弹出app应用下载提示

iOS开发实用技巧——在html页面头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端. 打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面. 在终端输入一行代码:python -m SimpleHTTPServer ---第二步:配置环境 打开safari,偏好设置->勾选 "在菜单栏中显示开发菜单",如下图所示. 第三步:编写html文件 在测试文件appdown.html中编写的测试代码如下: `说明`444934666

pc端页面在移动端显示问题

1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name="viewport" content="width=1220"> 2.如果不想让页面有水平滚动条又有元素需要固定在屏幕底部,则可以按以下方法操作 1)给html页面设置视口宽度 2)判断是否为移动设备,对pc和移动设备分别设置样式,如下: $(function(

6.0 移动端页面布局

移动端app分类 1.Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C 2.Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用 Viewport 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为