首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网页自适配手机

博客在手机打开一直不能适配手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端,只要修改每个页面的css 即可。 之前大概知道怎么去改,但是页面太多实在觉得麻烦,就一直没有去改。...= -1) {              isMobile = true;              alert("本博客手机打开不适配,建议使用电脑访问效果最佳!...css最烦的就是调来调去还差点的,特别是屏幕宽度,就很无语~ 手机适配的话先加个meta viewport。.../**手机适配**/ @media only screen and (max-width: 767px) {    header{width:100%}    .banner{width: 100%;height...bloglinkli{display: block} footer{width:100%} } 参考下面两篇文章 viewport:viewport 深入理解 media:CSS3@media查询 没有适配手机之前的效果

2.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

手机管家iPhoneX的适配总结

作者龙伟炜, 腾讯手机管家移动端开发 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。...https://developer.apple.com/videos/play/fall2017/801/) 最终说明见上面的官方说明 让App充满屏幕  刚升级完GM版Xcode,兴奋地build了一下手机管家...俨然,这时候需要手动适配的地方,也可以这样操作掉。 避免影响原本的各机型代码,通常这样 : ?...由于手机管家的适应力有点强,没有横屏和一些布局的情况,所以很快地就完成了适配工作,剩下的调整就交给设计师完成了~ 腾讯WeTest兼容性测试团队积累了10年的手游测试经验,旨在通过制定针对性的测试方案...腾讯WeTest提供:兼容适配测试;云端真机调试;安全测试;耗电量测试;服务器压力测试;舆情监控等服务。

69410

手机管家 iPhoneX 的适配总结

作者:龙伟炜, 腾讯手机管家移动端开发 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。...原文链接:http://wetest.qq.com/lab/view/337.html WeTest 导读 随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始。...注意设计的基本原则:(苹果呼吁的) [规格原帖] WWDC__Designing for iPhoneX ,最终说明见上面的官方说明 二、让App充满屏幕 刚升级完GM版Xcode,兴奋地build了一下手机管家...俨然,这时候需要手动适配的地方,也可以这样操作掉。...打包 || 直接拖.app去模拟器 (其实这里打不打都可以,基于程序员的仪式感我才打的包) 第4步,测试同学手上有这个.app文件,输入命令安装到模拟器上 请开着iPhoneX再去跑这命令 由于手机管家的适应力有点强

1.4K00

手机QQ空间iPhone X适配总结

自去年9月12日苹果发布会发布iPhone X之后,新颖的设计虽然引来不少骂声,但也给iOS设计和开发者带来了新的挑战,本文总结了iOS QQ空间对iPhone X适配过程遇到的问题和解决手段。...iPhone X尺寸说明 根据苹果iPhone X适配规范,iPhone X屏幕尺寸为375 x 812pt,宽度和iPhone 6/6s/7/8一样,但高度比它们高了145pt,如下图所示。...[image.png] 适配过程 NeXT,下面开始填坑过程。...OK,那么我们该如何适配状态栏高度呢?首先,假如之前代码中控件布局将状态栏高度写死20pt,那么很高兴地告诉你,以前挖过的坑,现在跪着也要填完。...,那就是到底要不要修改toolbar的高度,如下面输入面板中表情滑动条的高度,根据内部适配规范我们只是把它往上提而不修改其高度,但这看上去悬空的感觉可能会有点奇怪。

1.8K30

【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机平板电脑设备屏幕适配 )

文章目录 一、屏幕适配限定符 二、手机/平板电脑设备屏幕适配 平板电脑市场占有率 密度无关像素计算 手机设备限定符 平板设备限定符 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持...一、屏幕适配限定符 ---- Android 系统加载应用资源时 , 会根据当前运行应用的设备的相关属性 , 如 : 屏幕尺寸 / 屏幕像素密度 / 宽高比 / 屏幕方向 等属性 , 加载不同的屏幕适配限定符目录下的资源...port : 纵向屏幕 ; 屏幕宽高比限定符 : 标准屏幕宽高比为 16:9 ; long : 比标准屏幕要长的屏幕 , 如 20:9 , 21:9 ; notlong : 标准屏幕 ; 二、手机.../平板电脑设备屏幕适配 ---- 平板电脑市场占有率 Android 平板市场占有率如下 , 大概还是占了 40% 左右 , 因此平板适配还是很重要的 ; 密度无关像素计算 一般情况下 , 平板电脑的布局或图片资源...在 布局 或 图片 目录名称中 , 加上 sw360dp 限定符 , 几乎兼容所有的手机设备 ; 当前市面上的手机 , 屏幕宽度 很少有超过 360 dp 的 ; 只要横向 密度无关像素 \rm

6.9K20

你应该知道的折叠屏手机适配

折叠屏虽距离普及可能还有很长一段路,大多数公司还未将折叠屏列入适配的范围,但是提前研究下折叠屏的适配还是极好的。 折叠屏手机概况 华为Mate X ?...微软 Surfaceduo 最近新出,实际是双屏手机,暂无详细资料 ? 从目前推出的这几款折叠手机可以看出:折叠手机从折叠到展开,屏幕的变化类似于 iphone 到 ipad。 ?...…… 因此对于我们开发同学来说,对折叠屏的适配首先要确定一个预期,即要先确定好交互和设计,才能评估工作。因此“折叠屏的适配先是一个设计问题,然后才是一个适配问题”。...从以上折叠屏手机的情况来看,折叠屏手机适配其实就是一个响应式设计的问题,而响应式设计有一个比较公认9条的基本原则,折叠屏手机适配至少要满足这9项基本原则。...这表示适配的起点,是先按手机做然后适配台式机?还是先按台式机做然后适配手机? 使用哪种根据实际情况决定,无所谓好坏,对于折叠屏适配来说肯定是手机优先。 8.web字体vs系统字体 ?

1.9K10

Android手机 全面屏(18:9屏幕)适配指南

全面屏手机大致思路都是压缩额头与下巴,屏幕比例从传统的16:9变为18:9,提高屏占比以及屏幕内的虚拟导航键,本文将简要介绍全面屏适配中一些需要注意的东西以及解决方案。...鉴于目前全面屏屏幕比例,将ratio_float设置为2.1即可适配一众全面屏手机。...如果由于某些原因(UI适配等)禁止了分屏模式,这个时候就要注意了!负责将出现上下黑条的显示效果,奇丑无比!...这点在金立手机上的做法值得一提,看图: ? 是好是坏不便多言,但是有兼容性方案总比莫名拉伸好吧!若Android阵营没有一个统一规范,恐怕又要难为开发者、UI设计师了吧!...结语 总的来说,全面屏的到来为沉闷的手机ID设计带来了些惊喜,虽然不少开发者骂娘,但还是应当顺应历史潮流,况且很多情况Android系统早已有适配方案了不是?

1.7K10

Android手机 全面屏(18:9屏幕)适配指南

从小米MIX 1发布以来,越来越多所谓“全面屏”手机发布,如三星S8,小米MIX2,VIVO X20,Google Pixel2等等…2017年下半年开始,“全面屏”将大范围覆盖,低至千元机水平,就像当年手机屏幕从...全面屏手机大致思路都是压缩额头与下巴,屏幕比例从传统的16:9变为18:9,提高屏占比以及屏幕内的虚拟导航键,本文将简要介绍全面屏适配中一些需要注意的东西以及解决方案。...鉴于目前全面屏屏幕比例,将ratio_float设置为2.1即可适配一众全面屏手机。...这点在金立手机上的做法值得一提,看图: 是好是坏不便多言,但是有兼容性方案总比莫名拉伸好吧!若Android阵营没有一个统一规范,恐怕又要难为开发者、UI设计师了吧!...金立18:9全面屏适配说明. 全面屏时代 | APP如何快速适配? 这4个关键点你要知道!.

1.1K10

眨个眼就学会了Pixi.js

本文将为工友们介绍PixiJS的基础知识和使用方法,希望可以和工友们**快速光速入门**,掌握 Pixi.js 的用法。 实际工作中我还没有用上 Pixi.js,本文只是记录我的学习过程。...本文使用 Pixi.js 7.2 版本 CDN 本文为了和各位工友一起快速上手 Pixi.js ,所以会使用 CDN 的方式引入 Pixi.js。...根据你的项目需求选择对应的 Pixi.js 版本: Pixi.js 历史版本下载地址 NPM 工作中很多项目都会使用脚手架的方式进行开发,通常也会使用 npm 的方式下载依赖包。...Pixi.js 也提供了这种方式。 npm i pixi.js 下载好 Pixi.js 后,在需要用到 Pixi.js 的页面中引入即可。...Pixi.js是一个强大的2D渲染引擎,可以用于创建各种类型的动画。 Pixi.js 提供了一个处理循环的对象 ticker,它是 Pixi.js 的核心组件之一。

6.5K10

SDK软硬编解码,将自动适配各类型直播手机

这个主要是一个适配的问题。多码率更多是一个网络环境的适配,比如说你在WIFI环境下,在3G环境下,在4G环境下,你是在热点区域下,还是在一个信号不太好的情况下,这都对码率非常敏感。...一个就是RTMP,这是Adobe的一个专利协议,目前使用比较普遍,除了有很多的开源软件适配,还有开源库的支持。这些都比较完善。...拿着电信手机的用户在路上直播了一个视频。而观众可能是移动跟联通的用户。我们都知道,现在国内的网络基本上都有一个跨网通信的问题,所以你让移动或者联通的用户直接去看电信用户的直播效果会比较差。...所以有的时候要用硬件,有的时候要用软件,当中有大量的适配过程。 区别硬件和软件很简单,主要就是看吃不吃CPU,耗不耗电。你要做多终端适配的话,可以在SDK里加一些动态调整的配置文件。...这个配置文件会根据我们在后端做的终端适配来实时更新,一旦手机装上APP,就可以知道手机的版本信息。然后再匹配对应的软解、硬解。包括你后期的维护,适配的更新,都会直观的反映到你前端的APP上去。

2.5K80

【Android 屏幕适配】异形屏适配 ① ( 异形屏类型:刘海屏、水滴屏、挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )

文章目录 一、异形屏类型:刘海屏、水滴屏、挖孔屏 二、沉浸式布局刘海屏适配 三、华为手机异形屏适配注意点 屏幕适配参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 异形屏适配参考文档...O 适配 VIVO - 异形屏适配指南 OPPO - OPPO凹形屏 ( 刘海屏 ) 适配说明 OPPO - OPPO挖孔屏适配指导 详解Android刘海屏适配 异形屏适配难点是 需要针对 不同的手机厂商..., 不同的 Android 系统版本 进行适配 ; 一、异形屏类型:刘海屏、水滴屏、挖孔屏 ---- Android 手机除了正常屏幕之外 , 还存在异形屏 , 这些屏幕也需要进行适配 ; 异形屏有...组件 不是全屏 的 , 那么 耳朵区的内容是状态栏 ; 如果 Activity 组件是 全屏的 , 那么就需要将耳朵区设置成沉浸式背景 ; 在 耳朵区 , 将 沉浸式的背景 填充到该区域 ; 三、华为手机异形屏适配注意点...---- 华为手机的 刘海屏 的 刘海 和 耳朵区 是可以设置为黑屏状态的 ; 华为手机可以设置 启用刘海 , 也可以关闭刘海 ; 如果关闭了刘海 , 则 不启用异形屏适配 ; 如果 开启了刘海

2.1K40

个人博客网站怎么适配手机端夜间模式或深色模式

大家对网站的自适应模式都已经清楚了,现在个人博客基本都兼容自适应代码,相比手机端的优势很明显,在PC端、手机端和IPAD端都采用同一套代码,不必再另外解析独立域名,有效避免了网页内容的重复,并能集中精力维护网页...但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式,从而改善用户在环境光亮低时的阅读体验。...很多手机APP应用都已经对夜间模式进行了支持,那么问题来了,对于手机网站来说,个人博客的网站能否支持自适应浅色模式和夜间模式呢?答案是当然可以啦!...早在2020年7月W3C推出的 prefers-color-scheme 的 media 选择器,使得网页能够适配深色模式和浅色模式。 什么是prefers-color-scheme?...就技术而言我们先就可以很简单地实现手机端浅色和夜间模式的适配,prefers-color-scheme 有 2 种值:  light——浏览器宿系统使用亮色主题的界面,同时也是默认值,浏览器 privacy.resistFingerprinting

87020
领券