Question

我正在尝试在我的网页中创建点击通话链接，我有以下

<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>

我希望它只能在移动设备手机上专门显示在我的CSS中我试过

@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }

}
.mobile-only{
    display:none !important;
}

但它有效还没有办法实现这个目标吗？

Answer 1

CustomAnalyzer customAnalyzer = new CustomAnalyzer();    
        Directory directory = FSDirectory.open(Paths.get("directoryPath"));
        IndexWriter writer = new IndexWriter(directory, new IndexWriterConfig(customAnalyzer));
        Document doc1 = new Document();
        doc1.add(new TextField("text", "WAS_sample_tc", Field.Store.YES));
        writer.addDocument(doc1);
        writer.close();

        QueryBuilder queryBuilder = new QueryBuilder(customAnalyzer);
        Query query = queryBuilder.createPhraseQuery("text", "sample", 15);

        IndexSearcher searcher = new IndexSearcher(DirectoryReader.open(directory));

        TopDocs topDocs = searcher.search(query, 10);
        for (ScoreDoc scoreDoc : topDocs.scoreDocs) {
            Document doc = searcher.doc(scoreDoc.doc);
            System.out.println(doc.toString());
        }

Answer 2

仅将.mobile-only类移至您的媒体查询上方，即级联样式表，这意味着媒体查询将放置在文件的末尾，或者您可以将.mobile - 仅限于仅影响桌面分辨率的媒体查询内部。顺便说一句，避免在你的CSS中使用！important语句。

.mobile-only{
    display: none;
}

@media only screen and (max-width: 991px) {
    .mobile-only {
        display: block;

    }
}

其他方法将是：

@media only screen and (max-width: 991px) {
    .mobile-only {
        display:block;

    }

}
@media only screen and (min-width: 991px) {
     .mobile-only{
         display: none;
    }
}

Answer 3

这应该有用。

.mobile-only {
    display: block;
}

@media screen and (min-width: 768px){
    .mobile-only {
        display: none;
    }
}

在桌面按钮/链接上显示移动隐藏

3 个答案: