如何在每個設備中正確顯示相同的星符號？

我最近創建了一個Wordpress網站，當我在手機瀏覽器上使用網站時（Chrome在Android上），'\ 2605'星號表示反應不同。我在CSS中使用'\ 2605'來顯示5星組和網站節目根據賦值給一個javascript函數的星星組。下面是你理解的代碼。如何在每個設備中正確顯示相同的星符號？

CSS：

.rating { 
font-size: 48px; 
color: #0095f9; 
display: inline-block; 
overflow: hidden; 
} 
.rating::before { 
content: "\2605\2605\2605\2605\2605" 
}

使用Javascript：

function rating(stars) { 
var ratingfill=stars; 
var ratingfillshow=stars.toFixed(1); 
if(ratingfillshow>0){ 
document.getElementById("demo").innerHTML = ratingfillshow;} 
if(ratingfillshow==0){ 
document.getElementById("demo").innerHTML = '';} 
var rating_integer=Math.floor(ratingfill); 
var rating_decimal=ratingfill%1; 
var rating_dec_trimmed=rating_decimal.toFixed(1); 
if((rating_dec_trimmed==0.1)||(rating_dec_trimmed==0.2)|| 
(rating_dec_trimmed==0.3)||(rating_dec_trimmed==0.4)) 
{window.rate1.style.width = ((40*rating_integer)+18) + 'px';} 
if((rating_dec_trimmed==0.6)||(rating_dec_trimmed==0.7)|| 
(rating_dec_trimmed==0.8)||(rating_dec_trimmed==0.9)) 
{window.rate1.style.width = ((40*rating_integer)+28) + 'px';} 
if(rating_dec_trimmed==0.5) 
{window.rate1.style.width = ((40*rating_integer)+20) + 'px';} 
if(rating_dec_trimmed==0) 
{window.rate1.style.width = (40*rating_integer) + 'px';} 
}

在Javascript函數的評價（分）用於根據函數的評價分參數的值來改變分組的寬度（分）。

如果網站在Chrome桌面瀏覽器上工作，但在Chrome移動瀏覽器中使用網站時以不同方式工作，這種方式可以很好地工作。如何在css中使用星形符號，以便Chrome桌面瀏覽器和Chrome瀏覽器之間沒有區別？還有如何在每個瀏覽器中使星號符號功能相同？下面的截圖將顯示我正在談論的差異。

在鉻移動瀏覽器

星符號顯示時分值爲2

在鉻桌面瀏覽器

星符號顯示時分值爲2

感謝在提前。

來源

2017-07-17 codewiz

明星是一個字符，並將取決於字體家族 – smerny

你可以使用字體真棒明星這..看到[這]（https://www.w3schools.com/icons/tryit.asp?filename= tryicons_fa-star-half-full）例子..閱讀更多關於它[這裏]（http://fontawesome.io/icon/star/）... – Lal

@smerny可以詳細說明嗎？ – codewiz

那麼星星是一種字體，這意味着爲了獲得容器的正確寬度和高度而做的所有事情取決於星星的字體。

一種可能性是給星星一個固定的字體大小（但字體家族必須在每個地方都是一樣的），連續截取所有5顆星並使用photoshop或其他東西獲取一次開始的寬度，所以你知道1星有哪個寬度。如果你有這個值，你可以使用這些像素大小。

第二個可能是連續做5張圖片，把它們放在兩個容器中，外面的那個寬度是整個元素在你的網站上應該有的寬度（意思是如果顯示5星），則第二個限制圖片，這意味着如果你想顯示2星，內部容器的寬度將是40％。當然，內部容器中有圖像。

來源

2017-07-17 17:15:54

如何在每個設備中正確顯示相同的星符號？

回答

相關問題