HTML 모바일 버튼 표시

HTML, CSS 및 JS로 작성된 점진적 게임을 진행하고 있습니다. 저는 건물과 기타 클릭 가능한 기능에 버튼을 사용했습니다. 랩톱이나 데스크톱에서는 제대로 보이지만 태블릿이나 휴대 전화에서 볼 때 버튼에는 한 줄의 텍스트 만 표시됩니다.HTML 모바일 버튼 표시

어떻게하면 데스크탑 컴퓨터에서와 같은 방식으로 모바일 장치에서 단추를 표시 할 수 있습니까?

EDIT : 100 % 확실하지 않은 모바일 브라우저는 내 추측으로 크롬입니다. (친구가 iPhone에서 해보 았고 다른 사람이 태블릿에서 동일한 문제를 겪었습니다). 현재 버튼에 영향을주는 CSS는 없습니다. 여기

이 사진이 무슨 뜻인지 보여주고있다 :

incorrect and correct buttons

이 사용 된 정확한 HTML 코드입니다 : 내가 사용하지 않을 사용자의 경우

<button onclick="buyDirtHut()"> 
 
    Buy Dirt Hut<br /> 
 
    Each Dirt Hut gives you 2 population per second<br /> 
 
    Dirt Huts: <span id="dirtHuts">0</span><br /> 
 
    Dirt Hut Cost: <span id="dirtHutCost">1000</span> Gold 
 
</button>

출처

2015-01-15 ninjaman045

당신이 코드 –

그는 기본 스타일을 사용하고 CSS 게시하시기 바랍니다. – Blue

모바일 브라우저는 어느 것입니까? –

디폴트의 버튼 태그 모든 브라우저/모바일에서 동일하게 보이게하려면 간단한 스타일의 div를 사용할 수 있습니다. 기본 버튼 태그를 사용하면 일부 (모바일) 브라우저에서 다르게 표시됩니다. '맞춤'버튼을 스타일링하는 데 도움이 필요하면. 그냥 마음 편하게 물어봐.

HTML :

<div class="building" onclick="myfunction();"> 
    <!-- your content here --> 
</div>

CSS :

.building { 
    cursor: pointer; 
    background-color: #AFAFAF; 
    color: #000000; 
    width: 200px; 
    height: 70px; 
    float: left; 
    margin: 5px; 
} 

.building:hover { 

    background-color: #8F8F8F; 
    color: #111111; 

}

과정 떨어져 당신이 당신의 likings에 CSS를 조정할 필요가 ..

출처

2015-01-15 08:18:19

HTML 모바일 버튼 표시

답변

관련 문제