响应式网站应设置的视口(viewPort)

代码:

<meta name="viewport" content="width=device-width,initial-scale=1">

解释:

  • viewport(视口)是计算机或者设备屏幕上你浏览网页的内容宽度。
  • width=device-width 告诉浏览器以全尺寸渲染页面(不管屏幕尺寸可能是多少),如果没有在viewPort元数据属性中指定设备的宽度,设备将使用它自己默认的视口设置来渲染页面。
  • initial-scale(初始缩放比) 告诉浏览器在屏幕上首次加载网页的时候如何缩放它。使用initial-scale=1意味着页面将按照width属性确定的宽度来渲染,不放大不缩小。

请将上述代码添加到HTML head区域。

时间: 2024-10-23 00:24:25

响应式网站应设置的视口(viewPort)的相关文章

移动开发与响应式网站

今天说一下移动互联网的开发与响应式网站的一些东西. [viewport基本知识] 1.1.width=device-width:设置viewport视口宽度等于设备宽度 2.initial-scale=1:网页默认缩放比为1(网页在手持设备上不会进行缩放) 3.minimum-scale=1:网页最小缩放比为1 4.maximum-scale=1:网页最大缩放比为1 5.user-scalable=no:禁止用户手动缩放网页.在ios10以上的设备失效 [一些在移动开发和响应式网站中用到的语句(

响应式网站技巧

1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码.这种操作方式更容易实现响应式特性,在同一时间专注于一个任务. 当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间.这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智

css3响应式网站

来源:http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html 1 – 布局 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局.我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小.如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码.这种操作方式更容易实现响应式特性,在同一时间专注于一个

做响应式网站前期必会知识点-1前期准备

媒体查询 1.媒体类型 @media screen and (max-width: 300px) { body { background-color:lightblue; } } 其中media后面的那个单词是媒体类型 all所有媒体类型(默认,可以不写),screen屏幕,这两个是最常用的. 2.逻辑操作符 媒体查询的意思就是后面这个逻辑表达式为真,里面的css起作用. 中间and是逻辑操作符 and 与      都为真才真 or或逗号   有一个真就为真 not 非       not的有

响应式网站代码收集整理

1.meta标签 大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率.你可以使用视图的meta标签来进行重置.下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放.在标签里加入这个meta标签 <   meta name="viewport" content="width=device-width, initial-scale=1.0"   > IE8或者更早的浏览器并不支持Media Query.你可以使用

响应式网站开发基础

准备工作 远程调试 chrome 浏览器设置 在 chrome 浏览器中打开 chrome://inspect 手机设置 打开开发者模式 打开 USB 调试模式 打开手机端 chrome 浏览器 基础知识 视窗(viewport) 视窗是指浏览器能够显示内容的区域. 与设备无关的像素值(DIPs) 浏览器并不是物理硬件的像素宽度而工作的,而是根据 DIPs 宽度.DIPs (device independent pixels),与设备无关的像素值.DIPs 将像素值与实际距离联系起来.不论显示器

响应式网站设计原则

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则.Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用:嵌入式HTML 5,使用PhoneGap或者类似的工具:在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向. 分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTML 5.JavaScript和CSS创建

浅谈,bootstrap,响应式网站

1什么是响应式网站? 我刚进公司,项目经理给了我一个页面让我做 我看到第一个要求就头大了,什么是bootstrap?? 不知道,什么是响应式支持???不知道,到是最后一个css与js与页面分离, 项目经理问我什么都不知道,感觉挺担心的,会不会因为这个把我踢了,呵呵,不过运气很好,项目经理只是让我把这方面的知识补补, 有问题怎么办?? 百度一下,这是我第一想到的,然后就去查了, bootstrap : 前端框架,一些做好的效果,里面的各种插件非常好,可以直接拿来用 我就去bootstrap中文网下

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCallout"> <div class="col-md-12"> <div class="well"> <div class="page-header"> <h1>梅西升腾小宇宙<s