前端设计 - 移动端页面如何展示表格数据?
问 题 相对于PC,手机的屏幕小很多。如果想展示多列表格数据,将会非常难看。在移动端如果想展示表格数据,有什么好的方案么? 不限于表格的形式,只要把表格里的数据展示出来就可以。 谢谢大家~ 解决方案 我的方案(当然显示的数据不同,要求肯定不同,可以给参考一下) 原来用table的方案 pc显示效果 手机显示效果(有滚动条,太不友好了) 修改后用div布局 pc显示效果 手机显示效果
342 2022-07-19
编程技术问答社区
前端 - 设计稿为1080*1920,适配多种移动设备,不用rem,怎么写?
问 题 问题是这样的,设计师给我的是1080宽的设计稿,某个元素宽度为944,那么我该写多少px才能适配多种设备(安卓,ios)呢?不用rem。 解决方案 为啥有这奇怪需求。。。rem实际效果就是px啊。。。不用rem还非要用px写。。。。 解决方案:@media 一个尺寸一个尺寸的写
1234 2022-07-19
编程技术问答社区
移动端适配 - 有什么方法可以测试前端代码在不同移动端平台的兼容性?
问 题 背景 最近在研究svg制作icon system,但是需要考虑fallback到png的问题,参考了grunticon、阿里iconfont和css-tricks的svg兼容方案,想自己写一个glup插件。 遇到的问题 这个svg fallback我打算只支持iOS8+、Android4.x+,由于项目组没有这么多手机/系统,无法完成代码测试。想问问有什么方法可以测试吗? 解决方案 找到方案了: iOS:mac下安装xcode,在偏好里面安装需要的OS,然后可以自定义机型和系统,直接跑一个空白的demo,按shift+command+h,点击浏览器跑自己的网页 Android:window下安装genymotion,详见https://docs.genymotion.com/p...,不过需要先注册账号才可以选择机型
370 2022-07-19
编程技术问答社区
javascript - getBoundingClientRect().width和clientWidth都能获取设备宽度,他们有什么区别吗?
问 题 今天看flexible.js的代码,发现获取宽度使用getBoundingClientRect而不是直接clientWidth,请问这两个方法获取宽度有什么区别吗? document.documentElement.clientWidth document.documentElement.getBoundingClientRect().width; 解决方案 getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。 此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。 当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
1278 2022-07-17
编程技术问答社区
javascript - 微信web页面rem屏幕适配,多数手机能正常显示,三星s6显示为放大效果,应该怎么调整?
问 题 微信web页面开发,通过js实现多数屏幕适配,但三星s6,华为p9,oppo a57不成功,显示效果为放大显示。求大神指点。适配代码如下(两版)。 1. function _adaptFont(maxWidth, baseWidth, baseSize) { maxWidth = 750; //最大值750px baseWidth = 320; baseSize = 16; var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/ var docWidth = parseInt(document.documentElement.clientWidth); //和winWidth区别是,减去右边滚动条 var bodyWidth = parseInt(document.body.clientWidth); //混合模式
1880 2022-07-17
编程技术问答社区