HTML Notes: Apache support for responsive HTML

File Displays

Before we begin, compare these two example directories

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>

HTML Notes: Apache support for responsive HTML

File Displays

My solution

Links