One of the challenges for mobile-friendly websites is developing a website that looks good both on a mobile device that it does on a desk-top browser. I've found this to be a little bit challenging, but there are some techniques to employ that make the task somewhat seamless.

One thing to note before venturing in to this area, is that some WWidget objects do not lend themselves to mobile interfaces. It's not so much the issue of the 'layout' and sizing and presentation, but it's the 'interaction' that can be a challenge for some widgets. This is true in the case of the WTableView widget which makes really nice scrollable table-views. But, one of the 'interactions' with the table is the double-click, which can be used to trigger an 'open event' much like what is often done on a PC desktop using a mouse. On mobile devices properly detecting a double-click by the user is more difficult that you probably want it to be. So, in the case of mobile-friendly websites, be prepared to employ different controls.

Another thing to consider is being able to control which keyboard is going to be used for any field-input functions. Most mobile devices support multiple different styles of keyboards, such as a phone-dialer keyboard which dialing phone numbers, and a email-layout keyboard for inputting entries on fields that are asking for email addresses... you can control which keyboard will be displayed by the mobile device by setting a few different attributes in your input fields.

Modify wt_config.xml: <meta-headers user-agent=".*">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</meta-headers>

These codes cause this meta-header to be placed at the top of each web-page to the browser, and this allows mobile devices to properly display web pages sized for their browser window. Try formatting a simple .html web page a adding and removing these codes from the header, and see how it affects your cell-phone page display:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Mobile devices also have the ability to respond to 'suggestions' regarding which keyboard should be loaded. These are explained here: https://html.spec.whatwg.org/multipage/input.html#attr-input-type In order to get Wt to 'push' these suggestions to the mobile device, the input-widgets can be plugged with these values. The following code will cause a mobile device to use the 'datetime' input keyboard for this particular input field;

auto start = templt-> bindNew<Wt::WLineEdit>("start");

start-> setAttributeValue( "type", "datetime" ); // set 'datetime' keyboard type