I would like to hear from you why the view on mobile and web looks differently. And how inputs in IOS how to distinguish from string?
The way HTML elements are displayed by default depends on each Browser, not necessarily on the device (Safari for iOS is not the same as Safari for OSX).
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
It is common the use of CSS Resets to:
...force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
This is meant about Browsers. Check for example this article.
With regard of OS, each has different ways of styling its UI elements.
If the question is also:
Why do inputs in touch devices tend to only have the bottom border (line) ?
I would say it is a matter of style. But just as speculation, inputs and text-areas on desktop might need to have all borders to be distinguished from other elements. Desktop devices usually have bigger screens and more information displayed on them, whereas touch devices usually have smaller screens (so inputs might just need a minimum of a border-bottom). And after years this might have become the paradigm.