I'm developing a responsive HTML5 application where the same pages, that will be viewed on smartphones, should have different content when viewed in the desktop version.
For example, on a specific page to be viewed on desktop version, I will provide a full-size horizontal infographic. This same page, when viewed on smartphone, will have another version of the infographic, smaller and vertical.
I made tests putting the two versions of the content (desktop and smartphone) in a same page HTML, each inside a different DIV (_desktop and _smartphone). Then, through the CSS code below I can hide one or other DIV depending on the size of the screen:
@media (max-width: 760px) {
# _desktop {
Display: none;
}
}
@media (max-width: 760px) {
# _smartphone {
Display: inline;
}
}
The problem is that bookmarks links directed to one version (desktop for example) do not work for the other version (smartphone) even though they are duplicated in both versions.
Because of this, in the smartphone version the links of the navigation menus do not work. It seems to me that the links keep pointing to the name = "..." which is at the top of HTML even with its DIV in Display: none.
Can anyone tell me how I can make the menu links keep working for the IVDs that are inline and disregard those that are in none?
Or, perhaps, a simpler way of showing different content on a same page depending on the the browser size.
Thank you so much!