wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
272 stars 18 forks source link

配置了这个插件,出现iphone15白边问题和定位不了的问题 #42

Open Alan-Xia opened 2 months ago

Alan-Xia commented 2 months ago

module.exports = () => { return { plugins: { 'postcss-mobile-forever': { // 应用基于该宽度进行开发,转换后的伸缩视图将会以该宽度的视图作为标准进行比例伸缩 viewportWidth: 750, // 页面最外层选择器,例如“#app”,用于设置在桌面端和移动端横屏时的居中样式 appSelector: '#app', // 限制视口单位的最大宽度 maxDisplayWidth: 750, // 打开媒体查询模式,打开后将自动关闭 maxDisplayWidth enableMediaQuery: true, // 适配到桌面端时,展示的视图宽度 desktopWidth: 430, // 适配到移动端横屏时,展示的视图宽度 landscapeWidth: 425, // 高度断点,视图小于这个高度,并满足一定条件,则页面使用移动端横屏宽度,“原理和输入输出范例”一节具体介绍了该值的触发情况 // maxLandscapeDisplayHeight: 640, // 移动端竖屏视口视图,转换成什么视口单位 // 原来的配置 viewportUnit: 'vw', fontViewportUnit: 'vw', // 现在的配置 // mobileUnit: 'vw', // 单位精确到小数点后几位 unitPrecision: 3, // 选择器黑名单,名单上的不转换 selectorBlackList: ['md-'], // 排除文件或文件夹 exclude: [/node_modules/] } } } }

wswmsword commented 2 months ago

方便地话配个截图我看下。

Alan-Xia commented 2 months ago

Image_1718593899191

wswmsword commented 2 months ago

这是小程序吗,我也没试过小程序用这个插件。能看到这个白边是什么样式吗,有可能不是插件的问题,插件没有额外添加边框、边距之类的属性,只有在打开 border 选项的时候会在指定的 appSelector 的样式上加一个 box-shadow

Alan-Xia commented 2 months ago

这不是插件,是企业内部自己APP里面的h5微应用

wswmsword commented 2 months ago

好的,那这个 h5 如果不放到 APP 里,直接从浏览器访问是正常的吗?

Alan-Xia commented 2 months ago

浏览器访问是正常的

wswmsword commented 2 months ago

能看出来这个白边是什么属性导致的吗?

Alan-Xia commented 2 months ago

我把这个关了再试试 // 适配到桌面端时,展示的视图宽度 desktopWidth: 430, // 适配到移动端横屏时,展示的视图宽度 landscapeWidth: 425,

wswmsword commented 2 months ago

ok,你现在这个是媒体查询模式,还有个 CSS 函数的模式也可以试试,大概是下面这样:

module.exports = () => {
  return {
    plugins: {
      'postcss-mobile-forever': {
        // 应用基于该宽度进行开发,转换后的伸缩视图将会以该宽度的视图作为标准进行比例伸缩
        viewportWidth: 750,
        // 页面最外层选择器,例如“#app”,用于设置在桌面端和移动端横屏时的居中样式
        appSelector: '#app',
        // 限制视口单位的最大宽度
        maxDisplayWidth: 750,
        // 选择器黑名单,名单上的不转换
        selectorBlackList: ['md-'],
        // 排除文件或文件夹
        exclude: [/node_modules/]
      }
    }
  }
}

原来你的配置应该也有点问题,maxDisplayWidthenableMediaQuerydesktopWidthlandscapeWidth 不应该同时出现。

Alan-Xia commented 2 months ago

好的,我试试!谢谢你

wswmsword commented 2 months ago

不客气,有问题及时反馈。