View different HTML in Web App

Asked

Viewed 68 times

2

I have a responsive site, but I need it to be displayed differently within a webapp iframe (no navigation menu, no footer, for example). How do I load a different css, or hide elements, if the content is loaded within the application/iframe? (remembering that the responsive version in the browser will continue the way it is).

Thank you.

html css web-application app

  • Are you using any framework?

  • 1

    I don’t quite understand it. Your site is already responsive to mobile devices, and you want it to load another css when accessed by them? I could explain it better?

  • That’s right. Stuff from my boss. He wants, even with the site being responsive, to be developed an application (which loads the same site/ address, but without some elements, such as the header and footer...) - I was able to load another CSS detecting if the page opens in a frame, but it didn’t work. I need there to be a way to detect if the site is being accessed by the browser or by an application.

  • Just to give feedback on how I solved: Media query would not work as it would also change the view outside the application. .

1 answer

0

I believe the resource media query can help you.

The code below informs that the elements with the class .only-webapp will have display:none while the width is below 400px.

@media(max-width: 400px){
    .only-webapp{
        display: none;
    }
}

Code no js Fiddle.

Browser other questions tagged html css web-application app

You are not signed in. Login or sign up in order to post.