javascript - Webpage Section Visible Only For Mobiles

Question

I've built a webpage for a certain web application I've made. I'd like to add a specific option only for smartphone users , and don't want it to be visible for non-smartphone users. Is there any method to define a section ( div ) to be visible only for smartphone users?

Thanks in advance.

Answer 1

您可以使用响应式设计方法并使用媒体查询仅使用 css 实现您想要的：

//THIS CSS CLASS IS APPLIED ALWAYS
div.my-option {
    display: none;
}

//THIS MEDIA QUERY APPLIES ITS STYLES ONLY WHEN THE SCREEN WIDTH IS <= 767, SO IT'S A SMARTPHONE DISPLAY.
//IT OVERRIDES THE ONE ABOVE
@media only screen and ( max-width: 767px ) {
    div.my-option {
        display: inline;
    }
}

如果您对响应式设计感兴趣，两个最扩展的选项是Bootstrap和Zurb Foundation