完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过
使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。
有天,辛苦做了个复杂操作功能的页面,上线后有用户反馈:很多功能使用不了。惊了,以为是哪里出了bug。 立马联系用户,才发现原来是用户使用笔记本电脑,没有禁用触控板,然后不小心碰到导致整个界面都放大,很多功能超出界面不见了。 然而那能怎么办,用户第一,自然得快速解决这个问题,而且是触控板和触摸屏都得解决。
与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。
10步大幅提升网站可访问性:1. 检查<title>标签;2. 提供文字替代方案;3. 检查表单;4. 使用heading做信息架构;5. 减少焦点劫持;6. 按Ctrl+或command+查看页面缩放;7. 添加landmark角色;8. 设置快捷键;9. 触发界面转换需设置焦点;10. 填写一个简单的链接到<body>之后作为第一个内容元素。
基础 行标签都有哪些?特点? img标签的用法 请描述一下cookies,sessionStorage和localStorage的区别? 一个div,高度是宽度的50%,让该div的宽度占据整个屏幕,然后能自适应,垂直居中,怎么实现? 针对移动浏览器端开发页面,不期望用户放大屏幕,且要求“视口(viewport)”宽度等于屏幕宽度,视口高度等于设备高度,如何设置? 概念 Bom是什么?列举你知道的Bom对象。 了解过hybrid通信的实现原理么 fetch和ajax的区别 data-xxx 属性的作用是什么
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在head中加入如下代码:
简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。
写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开
viewport是移动端跨屏适配的基石,吃透这一概念,任何复杂多变的适配需求,都可以手到擒来。
箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了,之后不会改变。
在Selenium自动化测试中网页可能需要花费一些时间来加载,或者希望在触发测试代码之前可以看到页面上的特定Web元素。在这种情况下,需要执行“显式等待”,这是一段代码,通过它可以定义要发生的条件,然后再继续执行代码。
在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
随着移动端的流行,在移动端对网站进行重构和开发势在必行。但是你只有了解了移动设备的meta viewport参数之后,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
今天照例进行日常总结,在查找资料进行ctrl+c加ctrl+v时,发现知乎的页面竟然禁止转载了,也就是对复制做了拦截
本文介绍了移动端网页开发的一些基础概念,包括HTML、CSS、JavaScript,以及用于移动开发的响应式布局和自适应图片等。同时,文章还探讨了如何通过meta标签和viewport来优化移动端网页的展示效果。最后,还介绍了一些移动端网页开发中常见的问题和解决方法。
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。
前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍
1、CSS和JS在网页中的放置顺序是怎样的? (1)CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面,将内容呈现在页面上。 对于Firefox,head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致,这些link标签全部加载完成之前,页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示,会出现FOUC无样式内容闪烁。 对于IE/Edge
DOM 通过创建表示文档的树,让开发者随心所欲的控制网页的内容和结构。借助 DOM 提供的 API,开发人员可以轻松自如的完成对节点的 CRUD 操作
这是一个困扰我一周的问题了,不过现在终于在@Mr.L的协助下解决了,下面先描述下问题吧。大家在浏览QQ空间的时候,通过浏览器,或者按住ctrl+鼠标滚轮进行页面缩放,页面上会有个很友好的提示,如:
现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗?一个宽度只有375像素的手机,却能够显示宽度为980像素的网页,自然而然,网页会被缩小。
这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关
跨站脚本攻击XSS,是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中,当正常用户访问该页面时,则可导致嵌入的恶意脚本代码的执行,从而达到恶意攻击用户的目的。
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
前言 谷歌浏览器是目前为止口碑比较好的一款浏览器吧,虽然有些地方操作确实不如其他浏览器方便,但是大体上还是比其他浏览器好太多。 近日,博主在网上的小说网看小说的时候就发现,只要这样设置,就没广告,不得
谷歌浏览器是目前为止口碑比较好的一款浏览器吧,虽然有些地方操作确实不如其他浏览器方便,但是大体上还是比其他浏览器好太多。
(现在大部分移动浏览器包括wp都支持viewport的width选项),这些meta标签在开发webapp时起到非常重要的作用,可以给用户提供更好的体验
最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大。
在第一篇,老高只是简单的介绍了puppeteer如何安装和简单的用法,在第二篇中,老高为大家带来chrome浏览器的一些基本设置,比如禁止gpu以提升性能等等!
写在开头 最近的vite比较火,而且发布了2.0版本,vue的作者也是在极力推荐 在之前的文章里面我提到过,vite的缺点在于目前的生态不够webpack成熟,但是只要能弥补这个缺点,便有很大概率能替代目前webpack的大部分市场 全方位对比vite和webpack webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖) 3.webpack做的就是分析代码。转换代码,编译代码,输出代码 4.
全方位对比vite和webpack 一. webpack原理 1. webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖) 3.webpack做的就是分析代码。转换代码,编译代码,输出代码 4.最终形成打包后的代码 2. webpack打包原理 1.先逐级递归识别依赖,构建依赖图谱 2.将代码转化成AST抽象语法树 3.在AST阶段中去处理代码 4.把AST抽象语法树变成浏览器可以识
在之前的文章里面我提到过,vite的缺点在于目前的生态不够webpack成熟,但是只要能弥补这个缺点,便有很大概率能替代目前webpack的大部分市场
对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。
当当当当,我是美团技术团队的程序员鼓励师美美~“基本功”专栏又来新文章了,这次是一个系列,一起来学习前端安全的那些事。我们将不断梳理常见的前端安全问题以及对应的解决方案,希望可以帮助前端同学在日常开发中不断预防和修复安全漏洞,Enjoy Reading!
Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。
由于手机屏幕尺寸过小,使用原始分辨率会使得页面显示过小,因此使用了逻辑分辨率,用倍数放大的方法来保证兼容性。
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平台中对邮箱地址的识
Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。
前言 在iOS8中,苹果推出了WKWebView。WKWebView有一个突出特点,就是内存占用少。 但作为一个全新的WebView,API相比于之前的UIWebView肯定会有所不同。今天就在这里记录一下WKWebView的基本使用。 Webview的使用,通常包含以下几个部分:浏览器的基本设置,浏览器的各种回调,浏览器中js如何调用原生方法。 WKWebView基本使用 self.webview = [[WKWebView alloc]init]; [self.view addSubvi
解释: 对于非 HTML 标签之间的缩进,比如 script 或 style 标签内容缩进,与 script 或 style 标签的缩进同级。 示例:
json 异步加载js js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一 旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载,用到再加载,不用不加载。 复制代码 javascript 异步加载的三种方案: 1.defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。 2.async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。 1.2 执行时也不阻塞页面 3
* 本文原创作者:mscb,本文属FreeBuf原创奖励计划,未经许可禁止转载 你相信吗?仅仅是因为你点击了某个你一只在访问网站里的一张图片,导致你的用户名、密码泄漏,甚至电脑被植入病毒。这一切可不仅仅是危言耸听。 利用的方法来源于一个算不上漏洞的漏洞 。 Freebuf 曾经也报道过(链接地址中的target=”_blank”属性,为钓鱼攻击打开了大门),但这个“漏洞”至今还是可以利用。这篇文章,让我们实际运用一下这个漏洞,来实现钓鱼。 攻击原理 我们先来看看这一攻击是如何实现的,主要的原因是带有
一晃时间过得真快,不知不觉已经毕业10年了,这十年虽然我一直在从事着后台的开发,但是也接触和从事过前端的开发工作,那么接下来就让我回顾下我眼里的前端十年。
一、什么是防盗链 网站资源都有域的概念,浏览器加载一个站点时,首先加载这个站点的首页,一般是index.html或者index.php等。页面加载,如果仅仅 是加载一个index.html页面,那么该页面里面只有文本,最终浏览器只能呈现一个文本页面。丰富的多媒体信息无法在站点上面展现。 那么我们看到的各类元素丰富的网页是如何在浏览器端生成并呈现的?其实,index.html在被解析时,浏览器会识别页面源码中的 img,script等标签,标签内部一般会有src属性,src属性一般是一个绝对的URL地址或者相
浏览器在开始运行一个页面的时候,首先它会初始化js功能,当js发挥它的功能时候,记录了一系列浏览器按照顺序做的事情,也就是一个执行顺序,谁在谁之前发生,谁在谁之后发生。
0×01 前言 前几天我已经分别发了三篇关于DDOS攻击相关的文章,我也是第一次在freebuf上发表这种文章,没想到有那么多人点击我真的很开心,前几天我为大家介绍的DDOS攻击的方法和原理都是已经出现过大规模攻击行为的,或者说是已经实践过的。 今天我要讲的是还没有发生过大规模攻击行为的新方法–websocket和临时透镜,这两种方法其实以前早就有人介绍过了,但是我做的研究比以前发表过的那些可能更具体些,我也想把我的试验过程和一些心得分享给大家,大家一起交流一下将新技术实现的新方法。 0×02 websoc
领取专属 10元无门槛券
手把手带您无忧上云