viewport

Lighthouse audit says content not sized correctly for viewport, despite body width being 100%

末鹿安然 提交于 2019-12-30 17:28:34
问题 I have set the body css of my html page to 100% and with no margins or padding, but it still does not pass the following Google Lighthouse audit "Content Sized Correctly for Viewport". The audit passes if window.innerWidth === window.outerWidth It says the viewport size is 422px whereas the window size is 412px, so this means the window is 10px wider than wanted. When I inspect the body element, it is showing as being 412px wide. I would like to pass this audit, any ideas of what is causing

Can I change the viewport meta tag in mobile safari on the fly?

廉价感情. 提交于 2019-12-30 02:08:09
问题 I have an AJAX app built for mobile Safari browser that needs to display different types of content. For some content, I need user-scalable=1 and for other ones, I need user-scalable=0 . Is there a way to modify the value of the content attribute without refreshing the page? <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 回答1: I realize this is a little old, but, yes it can be done. Some javascript to get you started: viewport =

Android not respecting metatag removal?

此生再无相见时 提交于 2019-12-29 05:35:09
问题 I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript? <script type="text/javascript"> $(document).ready(function(){ function initMeta(){ var headID = document.getElementsByTagName("head")[0]; var metaNode = document.createElement('meta'); metaNode

手机移动端WEB资源整合

我与影子孤独终老i 提交于 2019-12-29 01:27:55
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

手机移动端WEB资源整合

时光毁灭记忆、已成空白 提交于 2019-12-29 01:27:25
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

手机移动端WEB资源整合

左心房为你撑大大i 提交于 2019-12-29 01:27:01
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

手机移动端WEB资源整合

半腔热情 提交于 2019-12-29 01:26:40
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

web移动端资源整(1)

坚强是说给别人听的谎言 提交于 2019-12-29 01:26:24
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略 Android 平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式,可隐藏地址栏, 仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后,safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式, 仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport模板

Animate counter when in viewport

二次信任 提交于 2019-12-28 13:47:32
问题 I have a counter which animates to a final number which is defined in the HTML. However I would like this animation to happen once it's in the viewport. I have a fiddle here which shows how scrolling seems to effect the counter number. $(document).ready(function() { $(function($, win) { $.fn.inViewport = function(cb) { return this.each(function(i, el) { function visPx() { var H = $(this).height(), r = el.getBoundingClientRect(), t = r.top, b = r.bottom; return cb.call(el, Math.max(0, t > 0 ?

How to zoom in to JPanel without moving the center: math or Swing?

非 Y 不嫁゛ 提交于 2019-12-28 13:39:13
问题 I am trying to make a zoomable map with Swing. The map is a JPanel in a JScrollPane. When zoomed in, the map changes size and paint() paints the elements in a different position. This all works great. However, the ScrollPane didn't change the viewport while increasing the image size, so that zooming in always moved the elements I was looking at out of the screen. I tried to solve this with scrollRectToVisible() , but I don't manage to get the right coordinates for the rectangle, either