HTML Notes: Apache support for responsive HTML
Before we begin, compare these two example directories
- I have no control over the first line it is hosted on a shared service
Meanwhile I have full control over the second 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
- 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.
- Rather than yak on about all the steps I took, here are some excepts from my Apache config file here:
- use this command "sudo apachectl configtest" to check the syntax then "sudo apachectl graceful" ti restart your server
- If this works for port 80 then be sure to also update file "/etc/httpd/conf.d/ssl.conf for port 443
- now reissue the graceful restart
# === conservative ===
# Options Indexes
# === liberal ===
Options All Multiviews
Allow from all
# Not Mobile Friendly
# IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*
# Mobile Friendly:
# Additional changes to reduce width
# 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 ".."
Back to Home
Waterloo, Ontario, Canada.