移动设备优先viewport
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。这实际上是一个非常及时的转变,因为现在越来越多的用户使用移动设备。
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
移动设备优先viewport的更多相关文章
- Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。
http://v3.bootcss.com/ 从2.x升级到3.0版本 Bootstrap 3并不向后兼容Bootstrap v2.x.下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南.如 ...
- Bootstrap工具包--用于响应式布局和移动设备优先的web项目
Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5 三个没啥区别 ...
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...
- 【viewport】移动设备的兼容性问题
前段时间用微信开发者工具重构一个菜单项目的时候发现iphoneSE显示不全以及布局错乱的问题,找到了一个简单粗暴的解决方法. 移动设备上的viewport分为layout viewport ...
- 针对移动设备的CSS3布局
针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...
- meta viewport相关
<!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta c ...
- 移动WEB viewport 相关知识
了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...
- 移动端开发viewport深入理解(转)
一.viewport的概念 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...
- 移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
随机推荐
- Xamarin Anroid开发教程之下载安装Xamarin
Xamarin Anroid开发教程之下载安装Xamarin Xamarin在过去安装时都会检查系统中是否安装了前面所提供的内容.而后来,Xamarin安装时只提供安装步骤,其它内容都需要读者自己下载 ...
- VBS发送邮件-1
Set objMail = Server.CreateObject("CDO.Message") Set objCDOSYSCon = Server.CreateObject(&q ...
- 在myql sqlserver里边怎么快速找到带有关键字的表
sql server 全部库: ),) set @id=(select count(*) from master..sysdatabases) drop table #t create table # ...
- lucene 3.0.2 搜索
1.lucene 词频 转载:http://mxdxm.iteye.com/blog/989031 lucene in action作为action系列,确实坚持了其实用性的特色.全书花了很大的篇幅来 ...
- linux进程用户内存空间和内核空间
When a process running in user mode requests additional memory, pages are allocated from the list of ...
- System-Defined Device Setup Classes Available to Vendors
https://msdn.microsoft.com/en-us/library/windows/hardware/ff553426(v=vs.85).aspx
- GridView 下拉搜索
/** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...
- JavaWEB前端向服务器端发送对象
最近项目中需要做一个关于批量删除的功能,删除条件有多个,需要从页面全部传给后台服务器程序,单个的删除,可以拼接参数给url,服务器端获取参数后执行删除操作即可.但是批量删除多个,参数会很多,传递就有些 ...
- CSS3:背景
细节注意 盒子:border-box | padding-box | content-box用于background-origin背景的开始和background-clip的剪切位置. 渐变也是生成一 ...
- Linux 计划任务 Crontab 笔记与总结(4)crontab 的日志
/var/log/cron 文件保存 cron 的任务执行记录 cd /var/log/ ls -l cron* 会发现每天都会有 cron 日志的变化 使用 tail -f cron 能够查看今天的 ...