viewport

前端基础习题一

[亡魂溺海] 提交于 2019-12-02 06:49:21
面试问题答案综合版 在线预览 http://blog.poetries.top/FE-Interview-Questions 第一部分:基础篇 第二部分:进阶篇 第三部分:高级篇 第四部分:通识篇 第五部分:精华篇 第六部分:精简篇 第七部分:综合篇 第一部分:基础篇 一、HTML、HTTP、web 综合问题 1 前端需要注意哪些 SEO 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减小, title 值强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title 要有所不同; description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取 重要内容不要用 js 输出:爬虫不会执行 js 获取内容 少用 iframe :搜索引擎不会抓取 iframe 中的内容 非装饰性图片必须加 alt 提高网站速度:网站速度是搜索引擎排序的一个重要指标 2 <img> 的 title 和 alt 有什么区别

jQuery center element to viewport using center plugin

匆匆过客 提交于 2019-12-02 05:45:36
问题 I am currently using the jQuery center plugin to center my div element and so far it works to an extend where it does center it to the containing parent container. What I want it to do is to center it to the current browser viewport center. How can that be done? My setup is a simple link when clicked, a div will pop up like a modal that I want centered into the current browser viewport center. 回答1: No plug-in is needed. This does the trick: $('#yourElement').css('display', 'inline-block')

iOS 9 Safari Viewport bug

老子叫甜甜 提交于 2019-12-02 04:33:56
问题 I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag. When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2: The Problem: When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no

svg viewbox resolution limits

橙三吉。 提交于 2019-12-02 02:03:02
问题 I was wondering if there are any hard limits to the viewbox of a svg element. I see weird clipping when I reach very low values ( say when vb width is around .002 ) or very large ones firefox starts to play funny around 200000000 width. Is there a rule, a spec somewhere where I can find the current limits ? Fiddle here: var dim = 0.00002; http://jsfiddle.net/7v36sLj8/13/ You'll see funny things starting to happen from that dim onwards, you can decrease by a factor 10 or increase by a factor

iOS 9 Safari Viewport bug

倖福魔咒の 提交于 2019-12-02 02:01:09
I'm working on the iPad version of a web project and am using Safari's web inspector to work with CSS layout etc. However I've tracked my bug to the viewport meta tag. When an iPad Air with iOS 9.0 - 9.2 is in portrait mode the viewport meta rules are broken/ignored. Here is a screenshot of the issue from an iPad air iOS 9.2: The Problem: When in portrait the computed width for the html and body tag is 768px yet there is a white space to the right that is about 300px. Also user-scalable=no does not apply. Fixed items like the nav and footer appear as 100% as seen in the image. Landscape is

pc页面自动缩放到手机端

被刻印的时光 ゝ 提交于 2019-12-02 00:34:48
今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服。 于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面,这样顺便写了个代码,但是在手机端却没有效果,然后仔细一想,手机端屏幕是不会变化的,根本无法触发window.onresize方法,再说,这样做了之后,在pc端改变屏幕尺寸后,页面是跟着缩放的,但是别人的网站在pc端改变屏幕尺寸时,是不会变化的,所以这样做肯定是错误的。 然后开始百度,看到一条评论,只需要把下边这段代码去掉就行了 <meta name="viewport" content="width=device-width,initial-scale=1.0"> !!! 试了一下,在页面中写的一个width=1200px的元素,能够恰到其份的适配下来!!!缩放的刚刚好 下面来了解一下meta标签中这些值的含义: width=device-width:表示布局viewport的值是设备的宽度(也可以是特定的viewport值) initial-scale=1.0: 设置页面的初始缩放比例 minimum-scale=1.0: 设置页面的最小缩放比例 maximum-scale=1.0:设置页面的最大缩放比例 user-scalable=no: 设置用户是否可以缩放操作

svg viewbox resolution limits

不羁的心 提交于 2019-12-01 20:20:31
I was wondering if there are any hard limits to the viewbox of a svg element. I see weird clipping when I reach very low values ( say when vb width is around .002 ) or very large ones firefox starts to play funny around 200000000 width. Is there a rule, a spec somewhere where I can find the current limits ? Fiddle here: var dim = 0.00002; http://jsfiddle.net/7v36sLj8/13/ You'll see funny things starting to happen from that dim onwards, you can decrease by a factor 10 or increase by a factor 10 as fitting. Thanks for the answers, I'll just take the min/maxes for the lowest common denominator

How does zooming, panning and rotating work?

心不动则不痛 提交于 2019-12-01 18:02:26
Using OpenGL I'm attempting to draw a primitive map of my campus. Can anyone explain to me how panning, zooming and rotating is usually implemented? For example, with panning and zooming, is that simply me adjusting my viewport? So I plot and draw all my lines that compose my map, and then as the user clicks and drags it adjusts my viewport? For panning, does it shift the x/y values of my viewport and for zooming does it increase/decrease my viewport by some amount? What about for rotation? For rotation, do I have to do affine transforms for each polyline that represents my campus map? Won't

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

杀马特。学长 韩版系。学妹 提交于 2019-12-01 17:10:15
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 this? When you reveal the DevTools panel, it usually appears next to the main application page, which

Make content to scale and fit with PhoneGap (using viewport)

Deadly 提交于 2019-12-01 16:53:45
I am trying to adapt and port an old project to PhoneGap. So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using. I have been doing some tests to find out the problem without any kind of result. For example, the following test just contains two files: index.html and config.xml It contains a DIV that is 276 pixels width and I would want PhoneGap to make