HTML Notes: Apache support for responsive HTML
File Displays
Before we begin, compare these two example directories
- http://www3.sympatico.ca/n.rieck/demo_vms_html/
- http://neilrieck.net/demo_vms_html/
Notes:
- 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
- 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
- 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"
- 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
<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.