Databases
StackOverflow2013
Postsdbo
POHTML - "CSS Media Query" behavior for HTML?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML - "CSS Media Query" behavior for HTML?
    primarykey
    data
    text
    <p>I've been working with a page which has two layouts dependent upon the width of the device being used to view the page:</p> <pre><code>/*Above is Mobile*/ @media screen and (min-device-width: 600px){ /*Below is Web*/ } </code></pre> <p>This approach essentially takes the various "web" and "mobile" divs throughout the page and displays, hides, or alters them as required for either layout; however, while the "web" divs are hidden, they are still loaded by the mobile device, potentially slowing down the page load.</p> <p>My first thought was that if I could define only the "mobile" divs and not the "web" divs, then I could avoid loading all of these additional elements. Thus, does a method similar to the CSS media query exist for HTML? Or alternatively, is is there a way to define two different HTML layouts based on the width of the device the page is displayed on?</p> <hr> <p>EDIT: A better approach, at least as far as images and graphics are concerned, is likely to use CSS to define the image rather than the HTML. Thus, instead of doing:</p> <pre><code>&lt;div id="img"&gt;&lt;img src="URL"&gt;&lt;/div&gt; </code></pre> <p>...and trying to hide the div, you would instead take this approach:</p> <pre><code>&lt;div id="img"&gt;&lt;/div&gt; </code></pre> <p>and...</p> <pre><code>div#img { background: none; } /*Above is Mobile*/ @media screen and (min-device-width: 600px){ /*Below is Web*/ div#img { background: url(URL); height: 400px; width: 600px; } } </code></pre> <p>Thus, the mobile version doesn't load the images and we're still only using CSS.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNick Mischler
    1. USNick Mischler
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you are using PHP, Python, Java, .NET, etc to serve up the pages then you can use detect functions to determine what form factor the user is accessing the website with. You can then redirect the user to a mobile version of the website or to a mobile template.
      singulars
      1. POHTML - "CSS Media Query" behavior for HTML?
      1. USLowkase
    2. COAt the moment, it is strictly defined in HTML and should eventually be defined in PHP (which I can see working). Before I get that far however, I'd like to arrange something in, shall we say, "pure HTML".
      singulars
      1. POHTML - "CSS Media Query" behavior for HTML?
      1. USNick Mischler
    3. CODon't think you can do it in a pure html way. You could use javascript to detect the browser and only insert the html with it.
      singulars
      1. POHTML - "CSS Media Query" behavior for HTML?
      1. USbanzomaikaka
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload