meta viewport属性含义

Safari移动页面在jQuery Mobile中的超级大尺寸问题解析
最新推荐文章于 2024-05-25 15:38:55 发布
原创 最新推荐文章于 2024-05-25 15:38:55 发布 · 131 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了使用jQuery Mobile框架时，在Safari移动浏览器中遇到的页面显示过大问题，详细解释了<meta name=viewport content=...>标签的用法及其对页面布局的影响，并提供了解决此问题的策略。

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

 

 

http://stackoverflow.com/questions/6389793/jquery-mobile-pages-super-large-in-safari-mobile
移动Web开发基础-Viewport
前端向朔
09-23 1889
导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。 用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户...
移动端内webview页面调试技巧
军火库
12-14 8957
为什么要介绍这两个东西呢？因为我们大部分的电视直播在网络上都是m3u8格式的m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。我不喜欢太过于术语的解释。简单来讲，我们看到的直播都是服务器把视频切片，然后一段一段给你发过来，客户端自己处理，整成视频给我们看这就是 m3u8但是浏览器并不支持video直接播放m3u8格式的视频所以我们需要video.js来帮助我们，把这些切片的音视频给整成可以看的东西。
Unity 工具之 内嵌网页/浏览器 web view / browser 插件的整理大全（包括Window Mac Android iOS 等）
热门推荐
仙魁XAN
06-30 2万+
1、Embedded Browser 不支持移动端，可以 360 放置到世界中 2、UnityWebCore 不支持移动端 3、UniWebView 支持移动端，但是贴屏显示 4、In-App Web Browser 支持移动端，但是贴屏显示 3D WebView for Windows and macOS 3D WebView for Android 3D WebView for Android and iOS ...
Mobile Web开发基础之一————viewport标签
blessdyb的专栏
05-17 217
      再挖一个坑 ，canvas的游戏开发基础暂时没时间弄了，等过一段时间闲下来了做一下。工作需要，补上一系列Mobile Web 开发的基础知识总结与相关文章的翻译。本系列针对传统的桌面浏览Web前端开发者。         我们先来一个基础的HTML5的网页框架，如下 &lt;!Doctype html&gt; &lt;html&gt; &lt;head&gt; ...
HTML Meta标签中的viewport属性含义及设置
weixin_34014555的博客
09-02 8049
两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml   随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习ht...
meta viewport标签的使用说明(手机浏览缩放控制)
09-28
meta viewport标签是用于控制移动设备上网页显示效果的HTML标签，它位于网页头部head区域，可以影响移动浏览器的视口（viewport）行为，主要控制页面的宽度、初始缩放比例、缩放的最小与最大比例以及是否允许用户...
深入理解meta viewport的target-densitydpi属性
在做WAP页面时，作者发现仅设置常见的viewport属性无法实现预期的屏幕适配，经过同事帮助后，了解到target-densitydpi属性的重要性。该属性主要用于调整Android设备上的屏幕像素密度，影响页面在不同像素密度屏幕上...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
在meta标签中，width属性有两个含义：一是phys.width，二是虚拟窗口的width。例如，使用meta name="viewport" content="width=device-width"时，width既可以是phys.width，也可以是虚拟窗口的width。这样就会出现两...
深入浅出Viewport设计原理(1)
最新发布
2401_84341405的博客
05-25 963
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
移动端Web基础--Viewport
xiaoxu的博客
11-02 1290
文章目录移动端的三个视口布局视口视觉视口理想视口 要想深刻理解Viewport，需知道像素的有关知识。大家可以参照我前面总结的关于像素的博客：移动端Web基础–像素 我们常常会看到这样一个标签 &amp;amp;amp;amp;lt;meta name=&amp;amp;amp;quot;viewport&amp;amp;amp;quot; content=&amp;amp;amp;quot;width=device-width, initial-scale=1.0, m
Web-viewport
JackDan9
09-27 500
手机网页宽度: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value ,
响应式 Web 设计 - Viewport
rolanannn的博客
04-11 827
帮助大家快速了解前段响应式基础操作
移动web——viewport（视口）
UNDEFINED_AUBE的博客
12-30 990
1.手机拥有了浏览器的初期并没有专门为移动设备设计页面，造成的直接结果就是访问的页面是直接将电脑页面进行缩放，操作起来十分不便，viewport就是用来解决这个问题的 2.viewport视口属性（该属性只有在移动端浏览器上才有用）：移动设备上用来显示网页的区域（如果把移动该设备的浏览器当做相框的话，viewport就相当于相框中的画，可能会比相框小/大，需要的就是刚好一样大） （1）修改vi
web学习 -- css 响应式web设计 Viewport
qq_39273039的博客
08-06 831
ViewportViewport1、语法2、网格视图2.1 创建3、媒体查询 @media3.1、定义3.2、语法示例3.3、媒体类型3.4、媒体功能3.5、示例4、图片4.1、width4.2、max-width4.3、背景图片contain100% 100%cover5、视频5.1、width5.2、max-width6、框架 -- BootStrap Viewport viewport 是用户网页的可视区域。 1、语法 针对移动网页优化过的页面的viewport meta标签大致如下 <meta
响应式 Web 设计 - Viewport，概念和用法
weixin_40551017的博客
02-27 204
什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport 一个常用的针...
web移动开发之视口viewport
weixin_45504050的博客
08-08 1299
视口 viewport 视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小。 PC设备 在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。 我们都能理解的大小是会影响到网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了网页的布局。 // 获取viewport的大小 document.documentEleme...
移动端开发：WebView介绍和使用、JSBridge等
EmotionComputer
11-28 2374
移动端开发
web移动端viewport的理解
boke的博客
07-01 608
1. viewport 概念 meta viewport 标签：首先是由苹果公司在其safar浏览器中引入的，目的是解决移动设备显示网页大小的问题。viewport概念上有人提出了，visual viewport、layout viewport、ideal viewport 三个概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值