简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的...这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。...content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。...and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!
，而设置了 -webkit-text-size-adjust 属性后浏览器可以渲染 12px 以下的字体大小 2....” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性，当网站添加到屏幕上，屏幕上会显示网站的图标点击此处查看详细解释...-webkit-overflow-scrolling: touch 解释：-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果，其中touch表示使用具有回弹效果的滚动...touch-fullscreen" content="yes"> 解释：添加到主屏幕上后全屏显示 16.... 解释：在UC浏览器中强制使用全屏显示网页 23.
标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。...6、iOS 图标 rel 参数 apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。...还有用 Chrome 框架的页面用webkit 内核 IOS6全屏 Chrome高版本全屏 webkit"> 让360双核浏览器用...webkit内核渲染页面 <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData
在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的 target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout...14、iOS中如何禁止用户保存图片＼复制图片 我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none...19、如何解决android平台中页面无法自适应 虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下
一旦网页过期，必须到服务器上重新传输。--> 浏览器从本地计算机的缓存中访问页面内容。...--> 2;URL=http://www.haorooms.com"> 页面。...其中的2是指停留2秒钟后自动刷新到URL网址。...-- 启用360浏览器的极速模式(webkit) --> windows相关设备： 浏览器的极速模式(webkit) --> <!
screen-orientation" content="portrait"> //Android 禁止屏幕旋转 //全屏显示... //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾...，标准排版，以及强制图片显示。...目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。...「解决方案」 在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow
一旦网页过期，必须到服务器上重新传输。--> 浏览器从本地计算机的缓存中访问页面内容。...-->2;URL=http://www.haorooms.com">页面。...其中的2是指停留2秒钟后自动刷新到URL网址。...-- 启用360浏览器的极速模式(webkit) -->windows相关设备： 浏览器的极速模式(webkit) --><!
第一款：Sencha Touch Sencha Touch 是世界上第一个支持 HTML5 和 CSS3 标准的移动应用框架，你可以使用 HTML5 来编写音频和视频组件，还可以使用 LocalStorage...统一的编程代码结构和要求，良好组织的代码易于维护； • 继承ExtJS 4的应用程序MVC架构； • 完善的API文档，示例；活跃的社区，网上有大量的文档书籍帮助学习； 缺点 • 兼容性差，仅支持webkit...内核的浏览器； • 框架比较重量级，学习成本比较高； • 商业化使用有版权问题； Sencha Touch学习的酷站推荐：http://extjs.org.cn/ 第二款：jQuery Mobile...jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。...不支持Windows Phone下的IE ； 第四款：Wink Toolkit 优点 • Wink的核心库是轻量级的，支持AMD规范的模块化加载，功能接口相比Zepto更丰富； • 提供很酷的2D
这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。 ●决定浏览器的呈现模式 对于实际操作，通知浏览器读取文档时用哪种解析算法。... 相关链接：WEB1038 - 标记包含无效的值 viewport viewport 可以让布局在移动浏览器上显示的更好...viewport" content="width=device-width, initial-scale=1.0"> width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边...apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。...-- 启用360浏览器的极速模式(webkit) -->webkit"><!
7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout...14、iOS中如何禁止用户保存图片/复制图片 我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout:none，...19、如何解决android平台中页面无法自适应 虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下
＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,...解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决 -webkit-touch-callout:none; //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口 -webkit-user-select...: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } 点击元素产生背景或边框怎么去掉...="black" /> 说明:除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用;如果content设置为default,则状态栏正常显示...;如果设置为blank,则状态栏会有一个黑色的背景;如果设置为blank-translucent,则状态栏显示为黑色半透明;如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分
之前从别的站扒的发现在部分浏览器无法显示底部导航栏 增加了如上属性后显示导航栏但是又遮挡了主体内容，今天翻遍了CSDN终于找到了解决办法。 webkit内核浏览器默认使用极速模式 --> webkit"> 全屏 --> touch-icon：在webapp下，指定放置主屏幕上 icon 文件路径 --> touch-icon" href="touch-icon-iphone.png...1 页面2</
-- 启用360浏览器的极速模式(webkit) --> webkit"> 2、IOS中Safari允许全屏浏览： ...B、Pragma(cache模式) 说明：禁止浏览器从本地计算机的缓存中访问页面内容。...：其中的2是指停留2秒钟后自动刷新到URL网址。...E、Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。
2.是否全屏，yes表示强制浏览器全屏，no则反之。 3.缩放不出滚动条。设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。...4.排版，fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。...不过我们可以通过这个属性来强制浏览器显示图片，而有时候为了提高用户体验，无图模式还是有必要的，对于有些 图片是不得不显示的，如：验证码，我们也可以单独设置其为显示模式，其他图片可根据用户的设置来进行弹性选择.../path/demo.jpg" show="force"> 7.使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。...四、360浏览器私有 Meta 属性 webkit"> 五、其它常用的Meta属性 <!
(head 头部必须)，页面关键词 keywords，页面描述内容 description，定义网页作者 author，网页搜索引擎索引方式 为移动设备添加 viewport viewport 可以让布局在移动浏览器上显示的更好...-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz...-- 启用360浏览器的极速模式(webkit) --> webkit"> <!...为什么要用 requireJS 试想一下，如果一个网页有很多的js文件，那么浏览器在下载该页面的时候会先加载js文件，从而停止了网页的渲染，如果文件越多，浏览器可能失去响应。...因为我发现仅仅使用 readonly 属性，在 IE 下是显示光标的。于是使用 disabled。 出现的问题 各家浏览器对于 disabled 属性有自己的样式设定，比如 IE 下是灰色的。
---- 7、不想显示webkit的滚动条，怎么办？...-webkit-touch-callout: none; ---- 10、取消IOS里Button、Input上的默认样式？...-webkit-appearance: none; ---- 11、想在Android里H5页面touch时没有蓝色的边框与遮罩，怎么办？...---- 20、在Android 上想不显示语音输入按钮，怎么办？...-- 1.ios7+支持自动播放 2.支持Airplay的设备（如：音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏 webkit-playsinline
2、百分比自适应布局 适用场景：信息文字较多的网页，内容较多网页。 3、全屏自适应布局 适用场景：单页面网页，移动web app 页面。...四、常见的移动端问题 1、什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina...显示屏中，像素点1个变为4个 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。 ...、 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { -webkit-text-size-adjust...webkit-touch-callout: none; } 10、摇一摇功能 HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
要说移动Web 开发与传统的PC 端开发，感觉也没什么不同，但得益于苹果对于智能机的推动，CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。...，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 第二个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0...添加初始化图片 用户点击你桌面上的webapp的图标后，打开会加载浏览器（实际上是webkit webview模块），然后下载、解析、渲染，在这个过程中，ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...:none;outline:none;} iOS 浏览器横屏时会重置字体大小的问题 iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决ios上的问题，但桌面版..., 可用在图片上加这个属性禁止下载图片*/ -webkit-overflow-scrolling: touch;/*快速滚动和回弹，模拟原生app效果*/ click 事件 ios的safari的click
在body上加此属性，这样就保证body的点击区域效果一致了2.outline：none(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。...-webkit-touch-callout-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加7....对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在...iphone上显示成啥效果呢？...其实很简单 ，就一个 meta ，形如 ：设置了meat后我们页面将如此呈现了：好了，我们就可以按全屏来布局我们的页面了，不用再担心页面显示的很小了！
元数据可以被使用浏览器（如何显示内容或加载页面），搜索引擎（关键词），或其他 Web 服务调用。 meta从一定程度上影响seo。...-- 使用Blink（Webkit） --> webkit"> 浏览器 --> webkit"> 显示，只作用于单图 --> 全屏，禁止长按菜单，禁止手势，标准排版，以及强制图片显示。...-- "添加到主屏幕“后，全屏显示 --> touch-fullscreen" content="yes"> <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
