新样式不能在手机和平板电脑上渲染

时间:2019-09-20 作者:sansae

我遇到了一个相当有趣的问题,我完全困惑了。我以前从未遇到过这种情况。

My Goal

在我的网站上制作表单移动响应

Problem

我所写的新风格中,没有一款适用于手机。无。当我在inspector工具的移动响应视图中调整浏览器大小时,会应用我的媒体查询,但在我查看的任何移动电话上都不会应用。

Things I\'ve tried

<我用过SauceLabs。com尝试调试此功能,但同样的事情正在发生。未应用我的媒体查询样式。

我已刷新手机中的缓存,关闭浏览器,关闭手机并重新启动。

我还尝试在整个页面上应用一个简单的“边框:3px实心红色”(在媒体查询之外)。边框显示在我的笔记本电脑和pc浏览器上(对于chrome、firefox、explorer),但在我的android手机和android平板电脑上都没有显示。

我的网站正在Pressable上托管。com。我正在“开发模式”中编写代码,我已经尝试过多次清除缓存。还是没什么。

我尝试了不同的@媒体查询:

仅介质屏幕和(最大宽度:600px)介质屏幕和(最大宽度:600px)介质屏幕和(最大宽度:600px)介质(最大宽度:600px)介质屏幕和(最小宽度:600px)介质屏幕等

  • (我知道最小值和最大值之间的区别;我只是尝试了各种方法,看看是否可以得到要渲染的内容)
    • 在部分中,我将视口设置为:

    meta name="viewport" content="width=device-width, initial-scale=1"
    

    Question

    你知道是什么导致了这一切吗?谢谢你的阅读。

    UPDATE

    Zfors帮助我解决了这个问题,因为它似乎是一个移动缓存问题。在我的函数中更新我的样式版本。php文件修复了我的样式在移动设备上无法呈现的问题。然而,我忘记问社区的一个问题是,为什么我首先要更改版本号?在以前的wordpress项目中,我根本不需要这样做。

    对于那些在这个问题上挣扎的人,Steve Stern 有一个很好的解决方案,但filemtime()并没有那么好地工作,所以我改用time()。

    1 个回复
    最合适的回答,由SO网友:zfors 整理而成

    你能看到手机上“匿名”窗口的变化吗?如果是这样的话,那么它很可能是一个移动缓存问题,解决这个问题的一种常见方法是向css文件添加一个版本号,即。

    wp_enqueue_style( \'my-main-styles\', get_stylesheet_directory_uri() . \'/style\' . $suffix . \'.css\', array(), $version_number_here );

    如果这样破坏缓存不起作用,我会尝试重构您的一些代码,以便它首先是移动的,正如@WebElaine所说,如果您的媒体查询出现问题,我会从那里进行故障排除。

    相关推荐

    我的脚本-bundle.js文件将作为样式表CSS文件发送到浏览器。帮助!

    我是WordPress自定义主题开发的新手。我正在为OceanWP使用儿童主题。我有一个网页包设置来热加载我的文件,但我的js脚本没有被发送到我的WordPress站点,而是作为CSS样式表发送,然后Chrome给我以下警告:Resource interpreted as Stylesheet but transferred with MIME type application/javascript: 当我检查警告时,索引。html文件错误地显示了此链接标记,从而生成了我的脚本包。js文件转换