cancel
Showing results for 
Search instead for 
Did you mean: 

ITS Application for LM01 screen size is too small on Mobile devices

Former Member
0 Kudos

Hi Everyone,

I am writing because I need your help. I created an ITS application for LM01 on Motorola MC3190 device. I am using IE browser. The problem is that screen size is too small.

I am using SAP_BASIS Release (740) SP-Level(0006) and the ITS Template I used is MOBILE4 Mobile Devices ( No HTML Tables ). The Operative System is Windows Embedded Handheld 6.5

I would like to know How solve the issue.



Solutions I have tried:

  • I tried customizing the CSS and it did not work. Font size is too small and the buttons too. I copied template MOBILE.CSS and I added the following code:

.MobileUserArea, input {

/* font-family:arial;

/* font-size:100%;

  font-family: Verdana, Arial, sans-serif;

  font-size:16px;

}

.MobileUserArea, textarea {

/*  font-family:arial;

/*  font-size:100%;

  font-family: Verdana, Arial, sans-serif;

  font-size:16px;

}


I need more information about this solution.

  • I used another browser Opera Mobile 10. Using this browser I set Mobile view and the screen look great but function keys it does not work. I tried using DEVINCLUDE_INTERMEC700C, DEVINCLUDE_NAURTECHCK61 and DEVINCLUDE_SYMBOL3090 as ITSMOBILEDEVICEINCLUDE and it did not work.

Should I just use only industrial browsers? I am using IE browser but Mobile view it does not work correctly. I see screens like in a desktop (small).

Thanks.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hello,

When you copied the Mobile.css file, please make sure the HTML template is pointing to the new Mobile.css file.

However, since the autogenerated code in the template already points to the Mobile.css file, it is better you add new classes in this existing file itself and change the HTML template classes for tags:

    

     <body class="MobileBodyBig" .....> </body>

Add in Mobile.css:

MobileBodyBig{

     height:100%;

     width: 100%;

  font-size:16px;

}

Remember to save and publish Completely - this mobile.css as well as the HTML template.

Former Member
0 Kudos

Thanks for you replay Utkarsha.


I have taken as reference your document http://scn.sap.com/docs/DOC-59089. But I am not sure if I am using the CCS correctly.

I used the parameter ~itsmobileCssInclude with the new MOBILE.CSS



I created my new CCS copy from mobile.css file of itsmobile service.




I modified the CCS creating the new class MobileBodyBig.



For linking to my CSS file I used the following code into every HTML template and I added the new CSS class:


The result was:


Can you help me to solve the issue?

Regards.

Josué.

Former Member
0 Kudos

Hey Josue,

Please create the new file under the internet service that you have created. Not under ITSMOBILE service. There mist be a default mobile.css under your service too.


Also, Please let me know the name of the new file that you have created-  mobile_e.css or mobile_new.css. Accordingly, you will have to modify the value of ~ITSMOBILECSSINCLUDE in config.

Let me know.

Answers (3)

Answers (3)

pravesh_jain3
Explorer
0 Kudos

Hi Torrealba

Is your issue resolved?

silver1
Explorer
0 Kudos

Hi Torrealba,

Instead of using a difference CSS, I suggest other option you can use to enlarge all the screen elements. That is to create a new style which requires a new generating class and 2 new services. Here are the steps:

1. Add a new style to table W3GENSTYLES, let's call it 'ZMOBILE' and put generation class ZCL_ITS_GENERATE_HTML_MOBILE.

2. Copy class CL_ITS_GENERATE_HTML_MOBILE to ZCL_ITS_GENERATE_HTML_MOBILE.

3. Go to method _COMPUTE_WIDTH_STRING in class ZCL_ITS_GENERATE_HTML_MOBILE, modify data type 'emfactor' to a value more than existing '0.86' (This is an important scale factor). Make it like 1.0 or 1.5 to try. I'll use 1.5 as an example.

4. Go to method IF_ITS_GENERATE_TEMPLATE~DESCRIPTION_TEXT in same class, Put the new style ZMOBILE under the case and put a new description.

5. Go to method CONSTRUCTOR, change template service from ITSGENMOBILE to ZITSGENMOBILE(this is a new service that we will create later).

6. Go to internet service and copy ITSMOBILE to ZITSMOBILE.

7. Look for 'FUNCTIONS' under HTML Templates of ZITSMOBILE. Edit the parameter value ~itsmobile1UnitWidth to 1.5em

8. Stay in internet service, copy service ITSGENMOBILE to ZITGENMOBILE for step 5.

9. In new service ZITGENMOBILE, look for GENERATION_INFO under HTML Template. Edit 'include(~service ="itsmobile"' to 'include(~service="zitmobile"'.

10. Now create all the screen templates using the new style ZMOBILE. You'll have everything enlarged. To further test with difference sizes, change the scale factor 1.5 to any other values.

Hope I don't miss a step and good luck.

Regards,

Silver

Former Member
0 Kudos

Hello,

With the ITSmobile we don't deliver an environment for a certain mobile device or a special browser. With the wide range of devices, operating systems and (industry) browsers supporting all possibilities is not possible. But to get all the functionality of the mobile device, it is highly recommended to use an industrial browser like PocketBrowser (Motorola/Symbol), IBrowser (Intermec) or NaurTech Browser (Naurtech Corp.).

Kind Regards,

Gerard Ward

Message was edited by: Oisin ONidh