学习笔记（15):移动端tips

最新推荐文章于 2023-06-01 16:27:43 发布
最新推荐文章于 2023-06-01 16:27:43 发布
阅读量116 收藏
点赞数
分类专栏： 研发管理 文章标签： html5 ajax css3 html5+ canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43156197/article/details/114604809
版权

立即学习:https://edu.csdn.net/course/play/27397/366028?utm_source=blogtoedu

移动端需要设置body的最大宽度：

max-width=“950px”

在<head>元素中加入一个参数：

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

如果不能完全显示于移动端，就将content改为item，亦或者不用也可以

<meta name="viewport" item="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

檀十七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端web学习笔记.doc
07-23
以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`<meta>`标签，尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的...
ansible学习笔记三:roles
01-07
ansible学习笔记三:roles环境：测试roles测试1，基本使用：1.1 结构1.2 role内各文件内容1.3 模板文件改动1.4 执行剧本1.5 检查测试2：2.1 结构2.2 各文件内容2.3 执行2.4 检查3. 多个角色一起使用的话：指定只运行...
uniapp项目使用echarts移动端h5tootip失效问题的解决方案（其他端没有尝试根据情况可以自己尝试）
最新发布
sdad2154的博客
06-01 1919
自己尝试测试之后发现一般的图表都解决tootip不显示的问题了 不过这种方式不要和npm i echarts 同时存在 因为npm安装的自己带有echarts.min.js 自己尝试改动过这个文件但是npm包里面有好多charts的js文件所以尝试之后发现没有任何作用。如果还想增加bmap地图上面那种就不够看了 因为bmap.js需要单独引入 项目才支持地图我说的地图是百度地图api的地图不是echarts那种块级地图。特别注意的是 cdn直接引入不需要在echarts.min,js中配置。
移动端的小TIPS
lyl123666666的博客
11-03 124
移动端的小TIPS
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
01-07
课程为零基础学习开发的学员而准备，无需任何基础，无任何专业限制，通通从零开始，由浅入深学习开发，每个知识点均有对应案例作为指导，通俗易懂，简单易学，易上手。课程经过长时间的经验总结，采取合理又容易和轻松上手的方式开展教学，再配合企业开发中实际遇到的案例作为练习，相当于直接参与企业开发，技能和经验同步获取。希望学习本课程的学员认真学习每一个课时的视频，跟着视频练习和做作业，只有多写多练才能灵活变通，掌握真正的核心技术。 课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等；JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等；新型前端开发大部分回归原始开发，核心编程能力非常重要，本课程教会你如何玩转前端。
移动端 Tips插件代码
sszcome的博客
03-22 1164
主要有4中提示窗口，成功，错误，提示和加载窗口（2个）。书写这个插件，用到了js的面向对象编程，css3的动画技术。应该有一点点学习价值，欢迎围观。由于是动态的提示框，不好截图，就不上效果图了，想看效果图，直接把代码拷过去，运行下就好了。话不多说，直接上代码。**这是页面代码：** <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charse
TIPS--移动端做适配
weixin_33912246的博客
08-31 130
1.meta viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> // width=device-width: 让当前viewport宽度等于设备的宽度 // user-scalable=no: 禁止用...
HTML5与移动端web学习笔记
02-26
新的HTML元素，例如section,nav,header,footer,article等用于绘画的Canvas元素用于多媒体播放的video和audio元素用于定位的GeolocationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI手机网页开发。...
ansible学习笔记二:playbook
01-07
ansible学习笔记二:playbook环境：测试ansible-playbook1. 测试一例：2. 在yml内增加tags及handlers3. 在yml内增加变量：3.1 方法1，外部通过-e去指定：3.2 方法2，内部指定：3.3 方法3，用setup模块里的变量：3.4 ...
js中的tip提示信息
03-16
js中的tip提示信息js中的tip提示信息js中的tip提示信息js中的tip提示信息
移动端页面一些小tips
Andrew_SJ的博客
08-04 197
一： 点击div跳转新页面. 不要用<router-link :to="..."></router-link>包裹div，而是给div绑定点击事件，再用$route.push()方法做路由跳转。 例子： <div class="flex-grow w-40 h-36 ml-4 pl-5 pt-6 text-xl text-white" style="background-color: #2e7d32" @click="$router.push({name:'Furniture
移动前端TIPS小技巧
weixin_34008933的博客
08-12 206
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 忽略将页面中的数字识别为电话号码 <metaname="fo...
前端遇到的响应式/适配移动端tips
qq_46617584的博客
05-27 249
1.img的srcset属性 响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下： <img src="image-128.png" srcset="image-256.png 2x" /> 使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。 CSS 优化和提高性能的方法有哪些？ 答
H5移动端自适应tooltip
luohui2017的博客
07-20 1882
实现tooltip是一个常见的需求，但如何根据tooltip中的内容，在手机端能正常展示自适应宽度的tooltip，先看看效果，如下： 共分为三种情况的自适应： 1.tooltip在侧边，并且内容长度的一半大于需要触发tooltip图标离最外边沿的距离，此时如果让小三角在中间，tooltip左边会显示不全； 2.tooltip长度超过一行，需要换行； 3.tooltip在侧边，并且内容长度的一半小于需要触发tooltip图标离最外边沿的距离。三种情况分别处理，代码如下： html:
【Tip】移动端 (不断更新中...)
Yoko优
02-26 298
【Tip】移动端 (不断更新中...) 1.取消手机端的双击缩放功能   2.强制竖屏、横屏       3.禁止覆盖层移动 ui.$mask.on('touchmove',function(e){    e.stopPropagation();    e.preventDefault(); }) 4.
移动端小Tip
weixin_45026839的博客
03-01 184
常用清除浮动的方法： .clear::before, .clear::after{ content: ""; height: 0; line-height: 0px; clear: both; visibility: hidden; /* 将行级元素转换为块级元素 */ display: block; } 使用其它开发软件，在html页面代码中添加移动端.
移动端模拟alert和tip弹框
小记心得
07-27 7123
最近，移动端的项目越来越多，每个项目中都有登录注册界面等，异常提示的弹框和tip用的较多， 于是抽出点时间封装了下对应的jquery插件，和一个函数；以便项目重用性。 废话不多说，直接上代码： 1  模拟alert弹出框函数 //模拟alert弹出框函数；datetime：20160727；by：xiewei【依赖于flexible.js和jquery或者zepto】 fu
js移动端文字提示框
caimingxian401的博客
04-09 4591
一个简单的文字提示框，可用于接口数据返回失败时的文字提示，或用户错误操作时的提示 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
移动端开发tips
aiuzi的博客
05-19 104
1. 标签中的内容，触碰上会有蓝色的遮罩，去除方法： a{ -webkit-tap-highlight-color:transparent; } 2. 移动屏幕简单适配方案(解决不了1px边框的问题) 解决字体大小的问题 document.documentElement.style.fontSize = viewWidth/ratio +'px 视口宽的获取 viewWidth = document.documentElement.getBoudingClientRect().width||w
Go语言学习笔记高清：从入门到实践
"Go语言学习笔记高清版是由雨痕编写的，该笔记详细记录了作者从2012年初开始学习Go语言的过程，随着时间的推移，不断更新和补充内容，涵盖了Go语言的基础知识、语法特性、函数设计、类型系统、控制结构、自定义类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值