Add documentation in hosting-webclient.md for how to properly design webpage hosting the webclient for mobile devices

This commit is contained in:
UnknownShadow200 2020-11-03 22:43:36 +11:00
parent d597f23a0d
commit 81f5e829e6
3 changed files with 13 additions and 34 deletions

View file

@ -83,3 +83,16 @@ You are required to have this HTML code somewhere in the page:
The links below show implementing a simple website that hosts the web client
* [Flask (python webserver)](hosting-flask.md)
### iOS / Android support
The webclient is compatible with Android / iOS devices and will show a touch based UI to these devices.
However, due to the limited screen size available on such devices, you should consider serving a webpage consisting of just the `<canvas>` to these devices - no header, footer or anything else.
Additionally, you will likely want to ensure zooming is disabled, viewport width is same as the device's width, and that 'add to device homescreen' is fully supported. You can accomplish that by adding these three HTML tags to the page:
```HTML
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```

View file

@ -590,14 +590,6 @@ void Chat_Send(const cc_string* text, cc_bool logUsage) {
Event_RaiseChat(&ChatEvents.ChatSending, text, 0);
if (logUsage) StringsBuffer_Add(&Chat_InputLog, text);
#ifdef CC_BUILD_WEB
if (String_CaselessEqualsConst(text, "/client debug")) {
Chat_AddRaw("DEBUG CANNON ENGAGED");
extern int Window_Debug;
Window_Debug = true;
}
#endif
if (Commands_IsCommandPrefix(text)) {
Commands_Execute(text);
} else {

View file

@ -3523,33 +3523,7 @@ void Window_Close(void) {
UnhookEvents();
}
#include "Chat.h"
static void LogStuff(void) {
char buffer[256]; cc_string str = String_FromArray(buffer);
int width, height;
double css_width, css_height;
width = GetCanvasWidth();
height = GetCanvasHeight();
String_Format2(&str, "Size: %ix%i", &width, &height);
Chat_AddOf(&str, MSG_TYPE_CLIENTSTATUS_1);
str.length = 0;
width = EM_ASM_INT_V({ return window.innerHeight; });
height = EM_ASM_INT_V({ return window.outerHeight; });
String_Format2(&str, "I:%i O:%i", &width, &height);
Chat_AddOf(&str, MSG_TYPE_CLIENTSTATUS_2);
str.length = 0;
width = GetScreenWidth();
height = GetScreenHeight();
String_Format2(&str, "Dims: %ix%i |", &width, &height);
Chat_AddOf(&str, MSG_TYPE_STATUS_3);
}
int Window_Debug;
void Window_ProcessEvents(void) {
if (Window_Debug) LogStuff();
if (!needResize) return;
needResize = false;
if (!WindowInfo.Exists) return;