HTML Notes: Apache support for responsive HTML

File Displays

Before we begin, compare these two example directories

  1. http://www3.sympatico.ca/n.rieck/demo_vms_html/
  2. http://neilrieck.net/demo_vms_html/

Notes:

  1. I have no control over the first line it is hosted on a shared service
    • appears to be Apache-1.3 running on the Solaris operating system (an obsolete version of UNIX)
    • only the first 20-characters of each filename are shown
    • since the description column is fully blank it would be nice to ditch it
    • performing a View Page Source reveals all data is rendered between <PRE> tags with lots of white-space
  2. Meanwhile I have full control over the second service ).
    • running Apache 2.4.6 on CentOS-7 (a flavor of Linux)
    • the complete filename is present
    • the "description column" is gone (to save horizontal space)
    • performing a View Page Source reveals:
      • all data is rendered inside an HTML table (which greatly reduces white-space)
      • a meta statement in the document head sets a viewport
    • update: a week later I noticed that one of the displays was still too wide due to a really long filename so I also removed "size column", "last-modified column", and file-type icon. Since this list is always sorted I also removed the file-sort hyperlink from the top line.

My solution

  1. Rather than yak on about all the steps I took, here are some excepts from my Apache config file here: "/etc/httpd/conf/httpd.conf"
  2. use this command "sudo apachectl configtest" to check the syntax then "sudo apachectl graceful" ti restart your server
  3. If this works for port 80 then be sure to also update file "/etc/httpd/conf.d/ssl.conf for port 443
  4. now reissue the graceful restart

<Directory "/var/www">
# === conservative ===
# Options Indexes
# === liberal === Options All Multiviews
# =================== AllowOverride None Order allow,deny Allow from all
# ===================
# Not Mobile Friendly # IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*
# =================== # Mobile Friendly: IndexOptions FancyIndexing
IndexOptions HTMLTable
IndexOptions FoldersFirst
IndexOptions NameWidth=* IndexOptions IgnoreCase IndexOptions SuppressDescription
# Additional changes to reduce width IndexOptions SuppressSize Indexoptions SuppressLastModified Indexoptions SuppressColumnSorting IndexOptions SuppressIcon
# need this meta statement in the HTTP header IndexHeadInsert '<meta name="viewport" content="width=device-width, initial-scale=1" />'
# (optional) ditch the parent link
# IndexIgnore ".."
# =================== </Directory>

Links


Back to Home
Neil Rieck
Waterloo, Ontario, Canada.