Forum Moderators: not2easy
<!DOCTYPE html> <html lang="en"> (or your page's language tag) <head>
<meta name=viewport content="width=device-width, initial-scale=1">(here's that viewport tag) <meta charset="utf-8">(recommended character set for better usability on mobile devices that do not support all charsets) <meta name=viewport content="width=device-width, initial-scale=1"> img,
embed,
object,
video
{
max-width: 100%;
} width="nn" in your image links, please don't use that kind of markup, it is long deprecated. Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.The Android developers have more at [developer.android.com...]
fully expect something to come along in the very near future that will resolve these issues for the WWW
There is often a non-trivial amount of work required to apply CSP to an existing web application. To reap the greatest benefit, authors will need to move all inline script and style out-of-line, for example into external scripts, because the user agent cannot determine whether an inline script was injected by an attacker.
but there are some things I strongly dislike about it
The path of fully custom RWD is way more expensive and time consuming which I know from experience.Very true, which is why I looked for ways us po' folk could stay in the game. My sites have been semi-responsive since I first read about the concept of liquid widths when people were concerned about monitors other than 600x800 back before mobile was a thing (in html4). I have not completed updating all my sites, but I have changed over enough to see that it improves traffic, sometimes dramatically.
Without a viewport setting your site is not considered by search engines to be device responsive in its design, even if "it works fine" on mobile devices.
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.
[edited by: not2easy at 7:38 pm (utc) on Sep 6, 2014]
Edited to add - having a viewport tag in your pages' headers is a clear indication to robots that the page is configured for mobile visits
Edited to add - having a viewport tag in your pages' headers is a clear indication to robots that the page is configured for mobile visits
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom.
When a page does not specify a viewport, mobile browsers will render that page at a fallback width ranging from 800 to 1024 CSS pixels. The page scale factor is adjusted so that the page fits on the display, forcing users to zoom before they can interact with the page.
Pages must be designed to work at different widths to use a responsive viewport.
---snip
It is possible to set the minimum and maximum zoom, or disable the user's ability to zoom the viewport entirely. These options negatively impact accessibility and should generally be avoided.
---snip
The meta viewport tag, while broadly supported, is not part of a formal standard. This behavior is being included in CSS as part of the CSS Device Adaptation specification. Until this specification is finalized and widely implemented, authors should continue to use the meta viewport tag for compatibility, either alone or with corresponding @viewport styles.